/** Shopify CDN: Minification failed Line 46:5941 "positon" is not a known CSS property Line 52:14 Comments in CSS use "/* ... */" instead of "//" Line 54:21 Comments in CSS use "/* ... */" instead of "//" Line 60:28 Comments in CSS use "/* ... */" instead of "//" Line 62:34 Comments in CSS use "/* ... */" instead of "//" Line 68:14 Comments in CSS use "/* ... */" instead of "//" Line 70:20 Comments in CSS use "/* ... */" instead of "//" Line 78:0 Unexpected "$" Line 85:0 Comments in CSS use "/* ... */" instead of "//" Line 104:0 Comments in CSS use "/* ... */" instead of "//" ... and 398 more hidden warnings **/ /*! * animate.css -http://daneden.me/animate * Version - 3.5.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2017 Daniel Eden */ @-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}to{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible;opacity:1}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible;opacity:1}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible;opacity:1}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible;opacity:1}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (print){.animated{-webkit-animation:unset!important;animation:unset!important;-webkit-transition:none!important;transition:none!important}} /*! Flickity v2.1.2 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:#333}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1} /* flickity-fade */ .flickity-enabled.is-fade .flickity-slider > * { pointer-events: none; z-index: 0; } .flickity-enabled.is-fade .flickity-slider > .is-selected { pointer-events: auto; z-index: 1; } /*! Lazyframe https://github.com/vb/lazyframe ---------------------------------------------- */ .lazyframe{position:relative;background-color:currentColor;background-repeat:no-repeat;background-size:cover}.lazyframe__title{position:absolute;top:0;left:0;right:0;padding:15px 17px;z-index:3}.lazyframe__title:after{z-index:-1}.lazyframe:hover{cursor:pointer}.lazyframe:before{display:block;content:"";width:100%;padding-top:100%}.lazyframe[data-ratio="16:9"]:before{padding-top:56.25%}.lazyframe[data-ratio="4:3"]:before{padding-top:75%}.lazyframe[data-ratio="1:1"]:before{padding-top:100%}.lazyframe iframe{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;width:100%;height:100%}.lazyframe[data-vendor="youtube"],.lazyframe[data-vendor="youtube_nocookie"]{background-color:#e52d27;font-family:Roboto, Arial, Helvetica, sans-serif}.lazyframe[data-vendor="youtube"] .lazyframe__title,.lazyframe[data-vendor="youtube_nocookie"] .lazyframe__title{color:#eee;font-family:Roboto, Arial, Helvetica, sans-serif;font-size:18px;text-shadow:rgba(0,0,0,0.498039) 0px 0px 2px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:color 0.1s cubic-bezier(0.4, 0, 1, 1)}.lazyframe[data-vendor="youtube"] .lazyframe__title:hover,.lazyframe[data-vendor="youtube_nocookie"] .lazyframe__title:hover{color:#fff}.lazyframe[data-vendor="youtube"] .lazyframe__title:before,.lazyframe[data-vendor="youtube_nocookie"] .lazyframe__title:before{content:'';display:block;background:linear-gradient(rgba(0,0,0,0.2), transparent);height:98px;width:100%;pointer-events:none;position:absolute;top:0;left:0;right:0;z-index:-1;-webkit-tap-highlight-color:transparent}.lazyframe[data-vendor="youtube"]:before,.lazyframe[data-vendor="youtube_nocookie"]:before{padding-top:56.25%}.lazyframe[data-vendor="youtube"][data-ratio="16:9"]:before,.lazyframe[data-vendor="youtube_nocookie"][data-ratio="16:9"]:before{padding-top:56.25%}.lazyframe[data-vendor="youtube"][data-ratio="4:3"]:before,.lazyframe[data-vendor="youtube_nocookie"][data-ratio="4:3"]:before{padding-top:75%}.lazyframe[data-vendor="youtube"][data-ratio="1:1"]:before,.lazyframe[data-vendor="youtube_nocookie"][data-ratio="1:1"]:before{padding-top:100%}.lazyframe[data-vendor="youtube"]:after,.lazyframe[data-vendor="youtube_nocookie"]:after{content:'';position:absolute;left:50%;top:50%;width:68px;height:48px;margin-left:-34px;margin-top:-24px;background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjIzFmMWYxZiIvPjxwYXRoIGQ9Ik0yMDMuMiAzNDRWMTg1LjVMMzQ4IDI2NC44IDIwMy4yIDM0NHoiIGZpbGw9IiNGRUZERkQiLz48L3N2Zz4=");background-position:center center;background-size:100%;background-repeat:no-repeat;opacity:.81;border:none;z-index:4}.lazyframe[data-vendor="youtube"]:hover:after,.lazyframe[data-vendor="youtube_nocookie"]:hover:after{background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjREQyQzI4Ii8+PHBhdGggZD0iTTIwMy4yIDM0NFYxODUuNUwzNDggMjY0LjggMjAzLjIgMzQ0eiIgZmlsbD0iI0ZFRkRGRCIvPjwvc3ZnPg==");opacity:1}.lazyframe[data-vendor="vimeo"]{background-color:#00adef}.lazyframe[data-vendor="vimeo"] .lazyframe__title{font-family:"Helvetica Neue", Helvetica, Arial;color:#00adef;font-size:20px;font-weight:bold;text-rendering:optimizeLegibility;user-select:none;-webkit-font-smoothing:auto;-webkit-tap-highlight-color:transparent;background-color:rgba(0,0,0,0.5)}.lazyframe[data-vendor="vimeo"]:before{padding-top:48.25%}.lazyframe[data-vendor="vimeo"][data-ratio="16:9"]:before{padding-top:56.25%}.lazyframe[data-vendor="vimeo"][data-ratio="4:3"]:before{padding-top:75%}.lazyframe[data-vendor="vimeo"][data-ratio="1:1"]:before{padding-top:100%}.lazyframe[data-vendor="vimeo"]:after{content:'';height:40px;width:65px;display:block;position:absolute;bottom:10px;left:10px;z-index:3;background-color:rgba(0,0,0,0.5);background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYmFzZVByb2ZpbGU9InRpbnkiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTcuNzY1IDE2Ljg5bDguNDctNC44OS04LjQ3LTQuODkiLz48L3N2Zz4=");background-position:center center;background-size:100% 100%;background-repeat:no-repeat;border-radius:5px;position:relative}.lazyframe[data-vendor="vimeo"]:hover:after{background-color:#00adef}.lazyframe[data-vendor="vine"]{background-color:#00bf8f}.lazyframe[data-vendor="vine"] .lazyframe__title{color:#fff;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;line-height:16px;white-space:nowrap;z-index:3;positon:relative}.lazyframe[data-vendor="vine"] .lazyframe__title:after{content:'';position:absolute;top:0;left:0;right:0;z-index:-1;height:115px;padding:24px 70px 24px 24px;background:linear-gradient(to top, rgba(23,23,23,0) 0, rgba(23,23,23,0.7) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#b3171717", endColorstr="#00171717", GradientType=0 )}.lazyframe[data-vendor="vine"]:before{padding-top:100%}.lazyframe[data-vendor="vine"][data-ratio="16:9"]:before{padding-top:56.25%}.lazyframe[data-vendor="vine"][data-ratio="4:3"]:before{padding-top:75%}.lazyframe[data-vendor="vine"][data-ratio="1:1"]:before{padding-top:100%}.lazyframe[data-vendor="vine"]:after{content:'';width:60px;height:60px;position:absolute;left:50%;top:50%;z-index:4;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM2IiB2aWV3Qm94PSIwIDAgMTM2IDEzNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTU2IDQ0Yy0uNyAwLTEuNC4yLTIgLjUtMS4yLjgtMiAyLTIgMy41djQwYzAgMS40LjggMi44IDIgMy41LjYuMyAxLjMuNSAyIC41czEuNC0uMiAyLS41bDM0LjYtMjBjMS4zLS43IDItMiAyLTMuNSAwLTEuNC0uNy0yLjgtMi0zLjVMNTggNDQuNWMtLjYtLjMtMS4zLS41LTItLjV6Ii8+PC9zdmc+");background-color:rgba(0,0,0,0.5);background-size:cover;background-repeat:no-repeat;margin-top:-30px;margin-left:-30px;border-radius:50%}.lazyframe[data-vendor="vine"]:hover:after{background-color:rgba(0,0,0,0.75)} /* # Functions ================================================== */ @function set-text-color($color) { @if (lightness($color) > 50) { @return ; // Lighter background, return dark color } @else { @return #ffffff; // Darker background, return light color } } @function set-text-hover-color($color) { @if (lightness($color) > 50) { @return lighten(, 40%); // Lighter background, return dark color } @else { @return darken(#ffffff, 40%); // Darker background, return light color } } @function secondary-button-color($color) { @if (lightness($color) > 80) { @return ; // Too light, send something darker } @else { @return $color; // Normal color } } /* # Variables ================================================== */ $site-max-width: 1200px; $site-width: 95%; $transition-default: all 0.3s ease; $gutter: 20px; $half-gutter: $gutter / 2; // Responsiveness $grid-small: 480px; $grid-medium: 798px; $grid-large: 1024px; $grid-widescreen: 1400px; $small: 'small'; $small-down: 'small-down'; $small-up: 'small-up'; $medium: 'medium'; $medium-down: 'medium-down'; $medium-up: 'medium-up'; $large: 'large'; $large-down: 'large-down'; $large-up: 'large-up'; $widescreen-up: 'widescreen-up'; $widescreen-down: 'widescreen-down'; // The `$breakpoints` list is used to build our media queries. // You can use these in the media-query mixin. $breakpoints: ( $small-down '(max-width: #{$grid-small})', $small '(min-width: #{$grid-small + 1}) and (max-width: #{$grid-medium})', $small-up '(min-width: #{$grid-small + 1})', $medium-down '(max-width: #{$grid-medium})', $medium '(min-width: #{$grid-medium + 1}) and (max-width: #{$grid-large})', $medium-up '(min-width: #{$grid-medium + 1})', $large-down '(max-width: #{$grid-large})', $large '(min-width: #{$grid-large + 1}) and (max-width: #{$grid-widescreen})', $large-up '(min-width: #{$grid-large + 1})', $widescreen-down '(max-width: #{$grid-widescreen})', $widescreen-up '(min-width: #{$grid-widescreen + 1})' ); // Fonts $headline-font-size: ; $nav-font-size: px; $footer-font-size: ; $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; $family-monospace: monospace !default; $render-mode: optimizeLegibility !default; $family-primary: $family-sans-serif !default; $family-secondary: $family-sans-serif !default; $family-code: $family-monospace !default; $size-1: 3rem !default; $size-2: 2.5rem !default; $size-3: 2rem !default; $size-4: 1.5rem !default; $size-5: 1.25rem !default; $size-6: 1rem !default; $size-7: 0.75rem !default; $size-8: 0.5rem !default; $size-very-small: $size-8 !default; $size-small: $size-7 !default; $size-normal: $size-6 !default; $size-medium: $size-5 !default; $size-large: $size-4 !default; $weight-light: 300 !default; $weight-normal: 400 !default; $weight-medium: 500 !default; $weight-semibold: 600 !default; $weight-bold: 700 !default; $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default; // Colors $black: hsl(0, 0%, 4%) !default; $black-bis: hsl(0, 0%, 7%) !default; $black-ter: hsl(0, 0%, 14%) !default; $grey-darker: hsl(0, 0%, 21%) !default; $grey-dark: hsl(0, 0%, 29%) !default; $grey: hsl(0, 0%, 48%) !default; $grey-light: hsl(0, 0%, 71%) !default; $grey-lighter: hsl(0, 0%, 86%) !default; $white-ter: hsl(0, 0%, 96%) !default; $white-bis: hsl(0, 0%, 98%) !default; $white: hsl(0, 0%, 100%) !default; $orange: hsl(14, 100%, 53%) !default; $yellow: hsl(48, 100%, 67%) !default; $green: hsl(141, 71%, 48%) !default; $turquoise: hsl(171, 100%, 41%) !default; $cyan: hsl(204, 86%, 53%) !default; $blue: hsl(217, 71%, 53%) !default; $purple: hsl(271, 100%, 71%) !default; $red: hsl(348, 100%, 61%) !default; // General colors $background: ; $border: !default; $border-hover: lighten(, 0.5) !default; // Text colors $text: !default; $text-light-opacity: ; $text-invert: set-text-color($text) !default; $text-light: $grey !default; $text-strong: $grey-darker !default; // Code colors $code: $red !default; $code-background: $background !default; $pre: $text !default; $pre-background: $background !default; // Link colors $link: !default; $link-invert: set-text-color($link) !default; $link-visited: !default; $link-hover: !default; $link-hover-border: !default; $link-focus: !default; $link-focus-border: !default; $link-active: !default; $link-active-border: !default; $tag-solid-light: !default; $tag-solid-dark: !default; // Header colors $header-link: ; $header-link-hover: ; $header-background: ; // Thumbnails $sale-sticker-color: ; $new-sticker-color: ; $bestseller-sticker-color: ; $comingsoon-sticker-color: ; $staffpick-sticker-color: ; $preorder-sticker-color: ; $thumbnail-text-alignment: ; // Transition effect variables $transition-speed: 0.3s; $transition-zoom: scale(1.1); // Miscellaneous $easing: ease-out !default; $radius-small: 2px !default; $radius: 4px !default; $radius-large: 6px !default; $radius-rounded: 290486px !default; $speed: 86ms !default; $truncation-fade: linear-gradient(to bottom, , ); // Box Shadows $overlay-box-shadow: 0 0 0 999em rgba(0,0,0,0.8); //Menu dropdowns $drop-down-menu-heading-font-size: px !default; $drop-down-menu-font-size: px !default; $drop-down-menu-font-style: !default; $drop-down-menu-hover-color: !default; $drop-down-menu-active-color: !default; $drop-down-menu-letter-spacing: px !default; /* # Mixins ================================================== */ // Change background opacity with any color value @mixin background-opacity($color, $opacity: 0.5) { background: $color; background: rgba($color, $opacity); } // Change text opacity with any color value @mixin text-opacity($color, $opacity: 0.5) { color: $color; color: rgba($color, $opacity); } // Clearfix for parents with floated children @mixin clearfix() { &::after { content: ''; display: table; clear: both; } *zoom: 1; } // Media query mixin @mixin respond-to($media-query) { $breakpoint-found: false; @each $breakpoint in $breakpoints { $name: nth($breakpoint, 1); $declaration: nth($breakpoint, 2); @if $media-query == $name and $declaration { $breakpoint-found: true; @media only screen and #{$declaration} { @content; } } } @if $breakpoint-found == false { @warn 'Breakpoint "#{$media-query}" does not exist'; } } // Responsive Show/Hide Helper @mixin responsive-display-helper($breakpoint: '') { .#{$breakpoint}show { display: block !important; } .#{$breakpoint}hide { display: none !important; } } // Responsive Text Alignment Helper @mixin responsive-text-align-helper($breakpoint: '') { .#{$breakpoint}text-left { text-align: left !important; } .#{$breakpoint}text-right { text-align: right !important; } .#{$breakpoint}text-center { text-align: center !important; } } /* This mixin can be used to set the object-fit: @include object-fit(contain); or object-fit and object-position: @include object-fit(cover, top); */ @mixin object-fit($fit: fill, $position: null){ -o-object-fit: $fit; object-fit: $fit; @if $position { -o-object-position: $position; object-position: $position; font-family: 'object-fit: #{$fit}; object-position: #{$position}'; } @else { font-family: 'object-fit: #{$fit}'; } } /* Prefix mixin for generating vendor prefixes. Based on https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/addons/_prefixer.scss Usage: // Input: .element { @include prefix(transform, scale(1), ms webkit spec); } // Output: .element { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } */ @mixin prefix($property, $value, $prefixes) { @each $prefix in $prefixes { @if $prefix == webkit { -webkit-#{$property}: $value; } @else if $prefix == moz { -moz-#{$property}: $value; } @else if $prefix == ms { -ms-#{$property}: $value; } @else if $prefix == o { -o-#{$property}: $value; } @else if $prefix == spec { #{$property}: $value; } @else { @warn 'Unrecognized prefix: #{$prefix}'; } } } //Flexbox // Flexbox display @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } // Inline flexbox display @mixin inline-flexbox() { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } // The 'flex' shorthand // - applies to: flex items // , initial, auto, or none @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } // Flex Flow Direction // - applies to: flex containers // row | row-reverse | column | column-reverse @mixin flex-direction($direction) { -webkit-flex-direction: $direction; -moz-flex-direction: $direction; -ms-flex-direction: $direction; flex-direction: $direction; } // Flex Line Wrapping // - applies to: flex containers // nowrap | wrap | wrap-reverse @mixin flex-wrap($wrap) { -webkit-flex-wrap: $wrap; -moz-flex-wrap: $wrap; -ms-flex-wrap: $wrap; flex-wrap: $wrap; } // Flex Direction and Wrap // - applies to: flex containers // || @mixin flex-flow($flow) { -webkit-flex-flow: $flow; -moz-flex-flow: $flow; -ms-flex-flow: $flow; flex-flow: $flow; } // Display Order // - applies to: flex items // @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } // Flex grow factor // - applies to: flex items // @mixin flex-grow($grow) { -webkit-flex-grow: $grow; -moz-flex-grow: $grow; -ms-flex-grow: $grow; flex-grow: $grow; } // Flex shrink // - applies to: flex item shrink factor // @mixin flex-shrink($shrink) { -webkit-flex-shrink: $shrink; -moz-flex-shrink: $shrink; -ms-flex-shrink: $shrink; flex-shrink: $shrink; } // Flex basis // - the initial main size of the flex item // - applies to: flex itemsnitial main size of the flex item // @mixin flex-basis($width) { -webkit-flex-basis: $width; -moz-flex-basis: $width; -ms-flex-basis: $width; flex-basis: $width; } // Axis Alignment // - applies to: flex containers // flex-start | flex-end | center | space-between | space-around @mixin justify-content($justify) { -webkit-justify-content: $justify; -moz-justify-content: $justify; -ms-justify-content: $justify; justify-content: $justify; -ms-flex-pack: $justify; } // Packing Flex Lines // - applies to: multi-line flex containers // flex-start | flex-end | center | space-between | space-around | stretch @mixin align-content($align) { -webkit-align-content: $align; -moz-align-content: $align; -ms-align-content: $align; align-content: $align; } // Cross-axis Alignment // - applies to: flex containers // flex-start | flex-end | center | baseline | stretch @mixin align-items($align) { -webkit-align-items: $align; -moz-align-items: $align; -ms-align-items: $align; align-items: $align; } // Cross-axis Alignment // - applies to: flex items // auto | flex-start | flex-end | center | baseline | stretch @mixin align-self($align) { -webkit-align-self: $align; -moz-align-self: $align; -ms-align-self: $align; align-self: $align; } // Logo text styles @mixin logo-text-style() { font-family: , ; font-weight: ; font-style: ; font-size: px; text-transform: ; } // Headline base styles for h1-h6 @mixin headline-style($font-size: $font-size-header) { font-family: , ; font-weight: ; font-style: ; font-size: $font-size * 1px; text-transform: ; line-height: 1.5; color: ; display: block; letter-spacing: px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @include respond-to('medium-down') { font-size: floor($font-size * 0.8) * 1px; } > a, > a:link, > a:visited { color: ; } > a:hover, > a:focus, { color: $link-hover; } } // Vendor prefixed word-wrap for long text strings (eg. urls) @mixin word-wrap { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; word-break: break-word; } // Absolutely positioned center elements (vertical and horizontal) @mixin center($width, $height: 0) { position: absolute; @if $height != 0 { left: calc(50% - (#{$width} / 2)); top: calc(50% - (#{$height} / 2)); } @else { left: calc(50% - (#{$width} / 2)); top: calc(50% - (#{$width} / 2)); } } // Icon mixin for alignment @mixin icon($size, $dimensions) { display: inline-block; font-size: $size; height: $dimensions; line-height: $dimensions; text-align: center; vertical-align: top; width: $dimensions; } // Create non-icon hamburger menu @mixin hamburger($dimensions) { cursor: pointer; display: block; height: $dimensions; position: relative; width: $dimensions; span { background-color: currentColor; display: block; height: 1px; left: calc(50% - 8px); position: absolute; transform-origin: center; transition-duration: $speed; transition-property: background-color, opacity, transform; transition-timing-function: $easing; width: 16px; &:nth-child(1) { top: calc(50% - 6px); } &:nth-child(2) { top: calc(50% - 1px); } &:nth-child(3) { top: calc(50% + 4px); } } &:hover { background-color: rgba(black, 0.05); } // Modifers &.is-active { span { &:nth-child(1) { transform: translateY(5px) rotate(45deg); } &:nth-child(2) { opacity: 0; } &:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } } } } @mixin overflow-touch { -webkit-overflow-scrolling: touch; } // Vendor prefix for placeholders @mixin placeholder { $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input"; @each $placeholder in $placeholders { &:#{$placeholder}-placeholder { @content; } } } // Disabled placeholders @mixin unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } %unselectable { @include unselectable; } @mixin arrow($color: transparent) { font-family: 'flex-icon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ''; display: block; pointer-events: none; position: absolute; transform-origin: center; top: 50%; transform: translateY(-50%); font-size: 0.8em; } %arrow { @include arrow; } @mixin block { &:not(:last-child) { margin-bottom: 1.5rem; } } %block { @include block; } // Delete icon @mixin delete { @extend %unselectable; -moz-appearance: none; -webkit-appearance: none; background-color: rgba($black, 0.2); border: none; border-radius: $radius-rounded; cursor: pointer; pointer-events: auto; display: inline-block; @include flex-grow(0); @include flex-shrink(0); font-size: 0; height: 20px; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px; outline: none; position: relative; vertical-align: top; width: 20px; &::before, &::after { background-color: $white; content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } &::before { height: 2px; width: 50%; } &::after { height: 50%; width: 2px; } &:hover, &:focus { background-color: rgba($black, 0.3); } &:active { background-color: rgba($black, 0.4); } // Sizes &.is-small { height: 16px; max-height: 16px; max-width: 16px; min-height: 16px; min-width: 16px; width: 16px; } &.is-medium { height: 24px; max-height: 24px; max-width: 24px; min-height: 24px; min-width: 24px; width: 24px; } &.is-large { height: 32px; max-height: 32px; max-width: 32px; min-height: 32px; min-width: 32px; width: 32px; } } %delete { @include delete; } // Close icon @mixin close { @extend %unselectable; -moz-appearance: none; -webkit-appearance: none; background-color: rgba($black, 0.2); border: none; border-radius: $radius-rounded; cursor: pointer; pointer-events: auto; display: inline-block; @include inline-flexbox(); @include flex-grow(0); @include flex-shrink(0); @include justify-content(center); @include align-items(center); outline: none; position: relative; height: 20px; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px; width: 20px; padding: 0; color: currentColor; transition: 0.2s linear; .icon { fill: currentColor; height: 50%; max-height: 50%; max-width: 50%; min-height: 50%; min-width: 50%; width: 50%; } &:hover, &:focus { background-color: rgba($black, 0.3); } &:active { background-color: rgba($black, 0.4); } // Sizes &.is-small { height: 16px; max-height: 16px; max-width: 16px; min-height: 16px; min-width: 16px; width: 16px; } &.is-medium { height: 24px; max-height: 24px; max-width: 24px; min-height: 24px; min-width: 24px; width: 24px; } &.is-large { height: 32px; max-height: 32px; max-width: 32px; min-height: 32px; min-width: 32px; width: 32px; } } %close { @include close; } // Animated loader @mixin loader { animation: spinAround 500ms infinite linear; border: 2px solid $grey-lighter; border-radius: $radius-rounded; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: 1em; position: relative; width: 1em; } %loader { @include loader; } @mixin overlay($offset: 0) { bottom: $offset; left: $offset; position: absolute; right: $offset; top: $offset; } %overlay { @include overlay; } // Product stickers @mixin sale-sticker { background-color: $sale-sticker-color; color: set-text-color($sale-sticker-color); } @mixin new-sticker { background-color: $new-sticker-color; color: set-text-color($new-sticker-color); } @mixin bestseller-sticker { background-color: $bestseller-sticker-color; color: set-text-color($bestseller-sticker-color); } @mixin comingsoon-sticker { background-color: $comingsoon-sticker-color; color: set-text-color($comingsoon-sticker-color); } @mixin staffpick-sticker { background-color: $staffpick-sticker-color; color: set-text-color($staffpick-sticker-color); } @mixin preorder-sticker { background-color: $preorder-sticker-color; color: set-text-color($preorder-sticker-color); } /* # Reset ================================================== */ /*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */ // Blocks html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } // Headings h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } // List ul { list-style: none; } // Form button, input, select, textarea { margin: 0; } // Box sizing html { box-sizing: border-box; } * { &, &::before, &::after { box-sizing: inherit; } } // Media img, audio, video { height: auto; max-width: 100%; } // Iframe iframe { border: 0; } // Table table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; text-align: left; } /* # Generic ================================================== */ $body-background-color: !default; $body-size: px !default; $body-rendering: optimizeLegibility !default; $body-family: , !default; $body-color: $text !default; $body-weight: $weight-normal !default; $body-line-height: 1.5 !default; $code-family: $family-code !default; $code-padding: 0.25em 0.5em 0.25em !default; $code-weight: normal !default; $code-size: 0.875em !default; $hr-background-color: $background !default; $hr-height: 2px !default; $hr-margin: 1.5rem 0 !default; $strong-color: $text-strong !default; $strong-weight: $weight-bold !default; $table-striped-row-even-background-color: $white-bis !default; html { background-color: $body-background-color; font-size: $body-size; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; overflow-y: auto; text-rendering: $body-rendering; text-size-adjust: 100%; backface-visibility: hidden; // Used to correct webkit transform bug } main { min-height: 30vh; // Make sure header and footer aren't stuck together } article, aside, figure, footer, header, main, hgroup, section { display: block; } body, button, input, select, textarea { font-family: $body-family; } code, pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: $code-family; } // Inline a { color: $link; cursor: pointer; text-decoration: none; transition: color $transition-speed ease-in-out; strong { color: currentColor; } &:hover { color: $link-hover; } } code { background-color: $code-background; color: $code; font-size: $code-size; font-weight: $code-weight; padding: $code-padding; } hr { background-color: $hr-background-color; border: none; display: block; height: $hr-height; margin: $hr-margin; } img { height: auto; max-width: 100%; } input[type="checkbox"], input[type="radio"] { vertical-align: baseline; } small { font-size: 0.875em; } span { font-style: inherit; font-weight: inherit; } strong { font-weight: $strong-weight; } // Block fieldset { border: none; } pre { @include overflow-touch; background-color: $pre-background; color: $pre; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; } } table { td, th { text-align: left; vertical-align: top; } th { color: $text-strong; } } .table.is-bordered { td, th { border: 1px solid $border; padding: 5px; } } .table.is-striped { tbody { tr:not(.is-selected) { &:nth-child(even) { background-color: $table-striped-row-even-background-color } } } } /* # Fonts ================================================== */ @font-face { font-family: 'flex-icon'; src: url('//www.mariapinto.com/cdn/shop/t/107/assets/flex-icon.ttf?31577') format('truetype'), url('//www.mariapinto.com/cdn/shop/t/107/assets/flex-icon.woff?31577') format('woff'), url('//www.mariapinto.com/cdn/shop/t/107/assets/flex-icon.svg?31577') format('svg'); font-weight: normal; font-style: normal; font-display: block; } /* # Typography ================================================== */ // Base typography body { font-family: , ; font-weight: ; font-size: px; color: ; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; font-display: swap; } // Headings h1, .h1 { @include headline-style($headline-font-size); } h2, .h2 { @include headline-style(floor($headline-font-size*0.9)); } h3, .h3 { @include headline-style(floor($headline-font-size*0.8)); } h4, .h4 { @include headline-style(floor($headline-font-size*0.7)); } h5, .h5 { @include headline-style(floor($headline-font-size*0.65)); } h6, .h6 { @include headline-style(floor($headline-font-size*0.6)); } a { color: $link; cursor: pointer; text-decoration: none; strong { color: currentColor; } &:hover { color: $link-hover; } } sub { font-size: smaller; } em, i { font-style: italic; } strong, b { font-weight: bold; } small { font-size: smaller; } // Blockquotes blockquote { font-size: larger; line-height: 1.2; font-style: italic; cite { display: block; font-size: smaller; &:before { content: "\2014 \0020"; } } } .text-align-center { text-align: center; } .text-align-left, .text-align-start { text-align: left; } .text-align-right, .text-align-end { text-align: right; } .text-align-justify { text-align: justify; } .is-capitalized { text-transform: capitalize; } .is-lowercase { text-transform: lowercase; } .is-uppercase { text-transform: uppercase; } .is-italic { font-style: italic !important; } .text-is-large { font-size: larger; } .text-is-medium { font-size: initial; } .text-is-small { font-size: smaller; } // Titles $title-color: !default; $title-size: px !default; $title-weight: !default; $title-line-height: 1.125 !default; $title-strong-color: inherit !default; $title-strong-weight: inherit !default; $title-sub-size: 0.75em !default; $title-sup-size: 0.75em !default; $subtitle-color: !default; $subtitle-size: $size-5 !default; $subtitle-weight: $weight-normal !default; $subtitle-line-height: 1.25 !default; $subtitle-strong-color: inherit !default; $subtitle-strong-weight: $weight-semibold !default; $subtitle-negative-margin: -1.25rem !default; .title, .subtitle { @extend %block; word-break: break-word; em, span { font-weight: inherit; } sub { font-size: $title-sub-size; } sup { font-size: $title-sup-size; } .tag { vertical-align: middle; } } .title { color: $title-color; font-size: $title-size; font-weight: $title-weight; line-height: $title-line-height; strong { color: $title-strong-color; font-weight: $title-strong-weight; } & + .highlight { margin-top: -0.75rem; } &:not(.is-spaced) + .subtitle:not(.modal_price) { margin-top: $subtitle-negative-margin; } // Sizes @each $size in $sizes { $i: index($sizes, $size); &.is-#{$i} { font-size: $size; } } } .subtitle { color: $subtitle-color; font-size: $subtitle-size; font-weight: $subtitle-weight; line-height: $subtitle-line-height; strong { color: $subtitle-strong-color; font-weight: $subtitle-strong-weight; } &:not(.is-spaced) + .title { margin-top: $subtitle-negative-margin; } // Sizes @each $size in $sizes { $i: index($sizes, $size); &.is-#{$i} { font-size: $size; } } } .large-heading { padding-bottom: 40px; } .signature { font-family: fantasy; } // Divider .heading-divider:not(.heading-divider--vertical) { border-style: solid; border-color: ; border-width:px; border-bottom: none; } .heading-divider--short { width: 70px; } .heading-divider--long { width: 100%; } .heading-divider--vertical { background: ; width: px; height: 40px; } @keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* # Helpers ================================================== */ // Flexbox .is-flex { @include flexbox(); } .is-inline-flex { @include inline-flexbox(); } .is-align-start, .is-align-left { @include align-items(flex-start); } .is-align-end, .is-align-right { @include align-items(flex-end); } .is-align-self-end, .is-align-self-right { @include align-self(flex-end); } .is-align-baseline { @include align-items(baseline); } .is-align-center { @include align-items(center); } .is-align-stretch { @include align-items(stretch); } .is-justify-start, .is-justify-left { @include justify-content(flex-start); } .is-justify-end, .is-justify-right { @include justify-content(flex-end); } .is-justify-center { @include justify-content(center); } .is-justify-space-around { @include justify-content(space-around); } .is-justify-space-between { @include justify-content(space-between); } .is-flex-nowrap { @include flex-wrap(nowrap); } .is-flex-wrap { @include flex-wrap(wrap); } .is-flex-wrap-reverse { @include flex-wrap(wrap-reverse); } .is-flex-row { @include flex-direction(row); } .is-flex-row-reverse { @include flex-direction(row-reverse); } .is-flex-column { @include flex-direction(column); } .is-flex-column-reverse { @include flex-direction(column-reverse); } // Flex position order .is-order-aligned-left { @include order(-1); @include respond-to('small-down') { @include order(inherit); } } .is-order-aligned-right { @include order(1); @include respond-to('small-down') { @include order(inherit); } } // Float .is-pulled-left { float: left !important; } .is-pulled-right { float: right !important; } // Overflow .is-clipped { overflow: hidden !important; } // Visibility .is-hidden { display: none !important; } .is-visible { display: block !important; } .is-sr-only { border: none !important; clip: rect(0, 0, 0, 0) !important; height: 0.01em !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 0.01em !important; } .is-invisible { visibility: hidden !important; } @include respond-to('small') { .is-hidden-small { display: none !important; } } @include respond-to('medium') { .is-hidden-medium { display: none !important; } } @include respond-to('large') { .is-hidden-large { display: none !important; } } @include respond-to('medium-down') { .is-hidden-mobile-only { display: none !important; } } @include respond-to('medium-up') { .is-hidden-desktop-only { display: none !important; } } @include respond-to('widescreen') { .is-hidden-widescreen { display: none !important; } } .is-invisible { visibility: hidden !important; } // Padding helpers .has-padding-top { padding-top: $gutter; } .has-padding-bottom { padding-bottom: 20px; } .has-padding-left { padding-left: $gutter; } .has-padding-right { padding-right: $gutter; } .has-padding { padding: $gutter; } .has-large-padding-top { padding-top: calc(#{$gutter} * 2); } .has-large-padding-bottom { padding-bottom: calc(#{$gutter} * 2); } .has-small-padding-top { padding-top: calc(#{$gutter} / 2); } .has-small-padding-bottom { padding-bottom: calc(#{$gutter} / 2); } // Margin helpers .has-margin-top { margin-top: $gutter; } .has-margin-bottom { margin-bottom: $gutter; } .has-margin-left { margin-left: $gutter; } .has-margin-right { margin-right: $gutter; } .has-margin { margin: $gutter; } // Border helpers .border--true { border: 1px solid $border; } .border-top { border: none; border-top: 1px solid $border; } .border-bottom { border: none; border-bottom: 1px solid $border; } .border-right { border: none; border-right: 1px solid $border; } .border-left { border: none; border-left: 1px solid $border; } // Styling for box .box { border-radius: 6px; box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); } // Can be used on inner div inside container element to apply borders (that maintain the same width as columns) .container-border--top::before { display: block; content: ''; height: 0; width: calc(100% - #{$gutter}); border-top: thin solid ; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; float: left; @include respond-to('small-down') { width: 100%; } } .container-border--bottom::after { display: block; content: ''; height: 0; width: calc(100% - #{$gutter}); border-top: thin solid ; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; clear: both; @include respond-to('small-down') { width: 100%; } } // Applied to parent element to control columns on inner text .has-columns--2 { column-count: 2; @include respond-to('small-down') { column-count: 1; } } .has-columns--3 { column-count: 3; @include respond-to('small-down') { column-count: 1; } } // Other .is-marginless { margin: 0 !important; } .is-paddingless { padding: 0 !important; } .is-radiusless { border-radius: 0 !important; } .is-shadowless { box-shadow: none !important; } .is-unselectable { @extend %unselectable; } .is-relative { position: relative; } .visuallyhidden { position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .is-fullwidth-mobile { @include respond-to('medium-down') { width: 100vw !important; padding: 20px !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; } } /* # Vendor override styles ================================================== */ [data-scroll-class] { opacity: 0; animation-delay: 0.2s; } // Fancybox .fancybox-thumbs__list a:before { border: 6px solid ; } .fancybox-button { transition: opacity $transition-speed ease-in-out; } // Flickity .flickity-viewport { width: 100%; } .flickity-prev-next-button { position: absolute; @include flexbox(); } .flickity-prev-next-button .flickity-button-icon { position: static; top: initial; left: initial; margin: auto; } .flickity-button { transition: background-color $transition-speed ease-in-out; } // Shopify .shopify-challenge__container { padding: 40px 0; } // Fix for fade glitch .quick-shop { .slideshow_animation--fade { .gallery-cell { opacity: 0 !important; transition: opacity 1s ease !important; &.is-selected { opacity: 1 !important; } } } } .flickity-resize .image-slideshow__slide { min-height: 100%; } .image-slideshow--fade .image-slideshow__slide { opacity: 0 !important; transition: opacity 1s ease !important; &.is-selected { opacity: 1 !important; } } //LazyFrame .lazyframe { background-color: #000 !important; // Used to override styling created by LazyFrame } /* # Grid/layout ================================================== */ .index { @include flexbox(); @include flex-wrap(wrap); } // Home page sections are set to flex so that half sizes may sit side-by-side .index-sections, .page-blocks { @include flexbox(); @include flex-wrap(wrap); @include justify-content(center); width: 100%; } // Controls the width and spacing of each section - the class ".shopify-section" is generated by Shopify and applied to each element (along with unique ID) - uses CSS variables which are set in liquid files .shopify-section { width: 100%; @include respond-to('small-down') { width: 100% !important; padding-left: 0 !important; // Ignores padding set on larger screen sizes padding-right: 0 !important; // Ignores padding set on larger screen sizes } } // Handles the background color and margins depending on what width has been chosen .section { max-width: $site-max-width; width: $site-width; margin-left: auto; margin-right: auto; &.has-background { width: calc(#{$site-width} - #{$gutter}); max-width: calc(#{$site-max-width} - #{$gutter}); padding-left: calc(#{$gutter} / 2); padding-right: calc(#{$gutter} / 2); } &.is-width-half { height: 100%; @include flexbox(); @include align-items(center); width: 100%; max-width: none; @include respond-to('medium-down') { width: 100%; } .container.small-down--has-limit { @include respond-to('small-down') { max-width: $site-max-width; width: $site-width; } } } &.is-width-wide { width: 100%; max-width: none; .container.has-limit { max-width: $site-max-width; width: $site-width; @include respond-to('small-down') { width: 100%; } } .container.small-down--has-limit { @include respond-to('small-down') { max-width: $site-max-width; width: $site-width; } } } } .section.section__wrapper { @include respond-to('small-down') { max-width: $site-max-width; width: $site-width; } } // Parent container for column elements - uses flexbox, so this container can be made smaller and the columns will shrink in relation .box-container { padding-left:15px; padding-right:15px; padding-bottom: 50px; } .center-line { margin: 0 auto; } .box-container-reviews { padding: 20px 15px; } .container { position: relative; margin: 0 auto; @include flexbox(); @include flex-wrap(wrap); .column, .columns { margin-left: calc(#{$gutter} / 2); margin-right: calc(#{$gutter} / 2); } &.is-small { width: 50%; @include respond-to('small-down') { width: 60%; } } &.is-medium { width: 70%; @include respond-to('small-down') { width: 80%; } } // Adds padding to bottom of columns - used for grid-type layouts &.has-column-padding-bottom { .column, .columns { margin-bottom: $gutter; } } } // Applies flex styling for columns created using Content Creator .row { @include flexbox(); @include flex-wrap(wrap); margin-bottom: $gutter; .column, .columns { @include respond-to('medium-down') { width: 100%; margin-left: 0; margin-right: 0; } } } [class*="offset-by"] { position: relative; @include respond-to('small-down') { position: static; } } // Add gutter when blocks drop to second row .has-gutter-enabled.has-multirow-blocks .has-gutter { margin-bottom: $gutter; } @mixin container-column-generator($breakpoint: '') { .#{$breakpoint}hidden { display: none !important; } .#{$breakpoint}visible { display: block !important; } // Base Grid .#{$breakpoint}one { width: calc(#{percentage(1 / 16)} - #{$gutter});} .#{$breakpoint}two { width: calc(#{percentage(2 / 16)} - #{$gutter});} .#{$breakpoint}three { width: calc(#{percentage(3 / 16)} - #{$gutter});} .#{$breakpoint}four { width: calc(#{percentage(4 / 16)} - #{$gutter});} .#{$breakpoint}five { width: calc(#{percentage(5 / 16)} - #{$gutter});} .#{$breakpoint}six { width: calc(#{percentage(6 / 16)} - #{$gutter});} .#{$breakpoint}seven { width: calc(#{percentage(7 / 16)} - #{$gutter});} .#{$breakpoint}eight { width: calc(#{percentage(8 / 16)} - #{$gutter});} .#{$breakpoint}nine { width: calc(#{percentage(9 / 16)} - #{$gutter});} .#{$breakpoint}ten { width: calc(#{percentage(10 / 16)} - #{$gutter});} .#{$breakpoint}eleven { width: calc(#{percentage(11 / 16)} - #{$gutter});} .#{$breakpoint}twelve { width: calc(#{percentage(12 / 16)} - #{$gutter});} .#{$breakpoint}thirteen { width: calc(#{percentage(13 / 16)} - #{$gutter});} .#{$breakpoint}fourteen { width: calc(#{percentage(14 / 16)} - #{$gutter});} .#{$breakpoint}fifteen { width: calc(#{percentage(15 / 16)} - #{$gutter});} .#{$breakpoint}sixteen { width: calc(#{percentage(16 / 16)} - #{$gutter});} // Whole .#{$breakpoint}one-whole { width: calc(100% - #{$gutter}); } // Halves .#{$breakpoint}one-half { width: calc(#{percentage(1 / 2)} - #{$gutter}); } // Thirds .#{$breakpoint}one-third { width: calc(#{percentage(1 / 3)} - #{$gutter}); } .#{$breakpoint}two-thirds { width: calc(#{percentage(2 / 3)} - #{$gutter}); } // Fourths .#{$breakpoint}one-fourth { width: calc(#{percentage(1 / 4)} - #{$gutter}); } .#{$breakpoint}two-fourths { width: calc(#{percentage(2 / 4)} - #{$gutter}); } .#{$breakpoint}three-fourths { width: calc(#{percentage(3 / 4)} - #{$gutter}); } // Fifths .#{$breakpoint}one-fifth { width: calc(#{percentage(1 / 5)} - #{$gutter}); } .#{$breakpoint}two-fifths { width: calc(#{percentage(2 / 5)} - #{$gutter}); } .#{$breakpoint}three-fifths { width: calc(#{percentage(3 / 5)} - #{$gutter}); } .#{$breakpoint}four-fifths { width: calc(#{percentage(4 / 5)} - #{$gutter}); } // Sixths .#{$breakpoint}one-sixth { width: calc(#{percentage(1 / 6)} - #{$gutter}); } .#{$breakpoint}two-sixths { width: calc(#{percentage(2 / 6)} - #{$gutter}); } .#{$breakpoint}three-sixths { width: calc(#{percentage(3 / 6)} - #{$gutter}); } .#{$breakpoint}four-sixths { width: calc(#{percentage(4 / 6)} - #{$gutter}); } .#{$breakpoint}five-sixths { width: calc(#{percentage(5 / 6)} - #{$gutter}); } // Sevenths .#{$breakpoint}one-seventh { width: calc(#{percentage(1 / 7)} - #{$gutter}); } .#{$breakpoint}two-sevenths { width: calc(#{percentage(2 / 7)} - #{$gutter}); } .#{$breakpoint}three-sevenths { width: calc(#{percentage(3 / 7)} - #{$gutter}); } .#{$breakpoint}four-sevenths { width: calc(#{percentage(4 / 7)} - #{$gutter}); } .#{$breakpoint}five-sevenths { width: calc(#{percentage(5 / 7)} - #{$gutter}); } // Eighths .#{$breakpoint}one-eighth { width: calc(#{percentage(1 / 8)} - #{$gutter}); } .#{$breakpoint}two-eighths { width: calc(#{percentage(2 / 8)} - #{$gutter}); } .#{$breakpoint}three-eighths { width: calc(#{percentage(3 / 8)} - #{$gutter}); } .#{$breakpoint}four-eighths { width: calc(#{percentage(4 / 8)} - #{$gutter}); } .#{$breakpoint}five-eighths { width: calc(#{percentage(5 / 8)} - #{$gutter}); } .#{$breakpoint}six-eighths { width: calc(#{percentage(6 / 8)} - #{$gutter}); } .#{$breakpoint}seven-eighths { width: calc(#{percentage(7 / 8)} - #{$gutter}); } // Tenths .#{$breakpoint}one-tenth { width: calc(#{percentage(1 / 10)} - #{$gutter}); } .#{$breakpoint}two-tenths { width: calc(#{percentage(2 / 10)} - #{$gutter}); } .#{$breakpoint}three-tenths { width: calc(#{percentage(3 / 10)} - #{$gutter}); } .#{$breakpoint}four-tenths { width: calc(#{percentage(4 / 10)} - #{$gutter}); } .#{$breakpoint}five-tenths { width: calc(#{percentage(5 / 10)} - #{$gutter}); } .#{$breakpoint}six-tenths { width: calc(#{percentage(6 / 10)} - #{$gutter}); } .#{$breakpoint}seven-tenths { width: calc(#{percentage(7 / 10)} - #{$gutter}); } .#{$breakpoint}eight-tenths { width: calc(#{percentage(8 / 10)} - #{$gutter}); } .#{$breakpoint}nine-tenths { width: calc(#{percentage(9 / 10)} - #{$gutter}); } // Twelfths .#{$breakpoint}one-twelfth { width: calc(#{percentage(1 / 12)} - #{$gutter}); } .#{$breakpoint}two-twelfths { width: calc(#{percentage(2 / 12)} - #{$gutter}); } .#{$breakpoint}three-twelfths { width: calc(#{percentage(3 / 12)} - #{$gutter}); } .#{$breakpoint}four-twelfths { width: calc(#{percentage(4 / 12)} - #{$gutter}); } .#{$breakpoint}five-twelfths { width: calc(#{percentage(5 / 12)} - #{$gutter}); } .#{$breakpoint}six-twelfths { width: calc(#{percentage(6 / 12)} - #{$gutter}); } .#{$breakpoint}seven-twelfths { width: calc(#{percentage(7 / 12)} - #{$gutter}); } .#{$breakpoint}eight-twelfths { width: calc(#{percentage(8 / 12)} - #{$gutter}); } .#{$breakpoint}nine-twelfths { width: calc(#{percentage(9 / 12)} - #{$gutter}); } .#{$breakpoint}ten-twelfths { width: calc(#{percentage(10 / 12)} - #{$gutter}); } .#{$breakpoint}eleven-twelfths { width: calc(#{percentage(11 / 12)} - #{$gutter}); } // Offsets .#{$breakpoint}offset-by-one { left: calc(#{percentage(1 / 16)});} .#{$breakpoint}offset-by-two { left: calc(#{percentage(2 / 16)});} .#{$breakpoint}offset-by-three { left: calc(#{percentage(3 / 16)});} .#{$breakpoint}offset-by-four { left: calc(#{percentage(4 / 16)});} .#{$breakpoint}offset-by-five { left: calc(#{percentage(5 / 16)});} .#{$breakpoint}offset-by-six { left: calc(#{percentage(6 / 16)});} .#{$breakpoint}offset-by-seven { left: calc(#{percentage(7 / 16)});} .#{$breakpoint}offset-by-eight { left: calc(#{percentage(8 / 16)});} .#{$breakpoint}offset-by-nine { left: calc(#{percentage(9 / 16)});} .#{$breakpoint}offset-by-ten { left: calc(#{percentage(10 / 16)});} .#{$breakpoint}offset-by-eleven { left: calc(#{percentage(11 / 16)});} .#{$breakpoint}offset-by-twelve { left: calc(#{percentage(12 / 16)});} .#{$breakpoint}offset-by-thirteen { left: calc(#{percentage(13 / 16)});} .#{$breakpoint}offset-by-fourteen { left: calc(#{percentage(14 / 16)});} .#{$breakpoint}offset-by-fifteen { left: calc(#{percentage(15 / 16)});} // Remove gutter on first and last column (must be consistent size) .equal-columns--outside-trim { .#{$breakpoint}one-half:nth-of-type(2n), .#{$breakpoint}eight:nth-of-type(2n), .#{$breakpoint}one-third:nth-of-type(3n), .#{$breakpoint}one-fourth:nth-of-type(4n), .#{$breakpoint}four:nth-of-type(4n), .#{$breakpoint}one-fifth:nth-of-type(5n), .#{$breakpoint}one-sixth:nth-of-type(6n), .#{$breakpoint}one-seventh:nth-of-type(7n), .#{$breakpoint}two:nth-of-type(8n) { margin-right: 0; } .#{$breakpoint}one-half:nth-of-type(2n+1), .#{$breakpoint}eight:nth-of-type(2n+1), .#{$breakpoint}one-third:nth-of-type(3n+1), .#{$breakpoint}one-fourth:nth-of-type(4n+1), .#{$breakpoint}four:nth-of-type(4n+1), .#{$breakpoint}one-fifth:nth-of-type(5n+1), .#{$breakpoint}one-sixth:nth-of-type(6n+1), .#{$breakpoint}one-seventh:nth-of-type(7n+1), .#{$breakpoint}two:nth-of-type(8n+1) { margin-left: 0; } @if $breakpoint == 'large-down--' { @include respond-to('large-down') { // Reset previous margins .#{$breakpoint}one-half.#{$breakpoint}one-half, .#{$breakpoint}eight.#{$breakpoint}eight, .#{$breakpoint}one-third.#{$breakpoint}one-third, .#{$breakpoint}one-fourth.#{$breakpoint}one-fourth, .#{$breakpoint}four.#{$breakpoint}four, .#{$breakpoint}one-fifth.#{$breakpoint}one-fifth, .#{$breakpoint}one-sixth.#{$breakpoint}one-sixth, .#{$breakpoint}one-seventh.#{$breakpoint}one-seventh, .#{$breakpoint}two.#{$breakpoint}two { margin-right: #{$gutter}; margin-left: #{$gutter}; } //Set new margins on right .#{$breakpoint}one-half:nth-of-type(2n), .#{$breakpoint}eight:nth-of-type(2n), .#{$breakpoint}one-third:nth-of-type(3n), .#{$breakpoint}one-fourth:nth-of-type(4n), .#{$breakpoint}four:nth-of-type(4n), .#{$breakpoint}one-fifth:nth-of-type(5n), .#{$breakpoint}one-sixth:nth-of-type(6n), .#{$breakpoint}one-seventh:nth-of-type(7n), .#{$breakpoint}two:nth-of-type(8n) { margin-right: 0; } //Set new margins on left .#{$breakpoint}one-half:nth-of-type(2n+1), .#{$breakpoint}eight:nth-of-type(2n+1), .#{$breakpoint}one-third:nth-of-type(3n+1), .#{$breakpoint}one-fourth:nth-of-type(4n+1), .#{$breakpoint}four:nth-of-type(4n+1), .#{$breakpoint}one-fifth:nth-of-type(5n+1), .#{$breakpoint}one-sixth:nth-of-type(6n+1), .#{$breakpoint}one-seventh:nth-of-type(7n+1), .#{$breakpoint}two:nth-of-type(8n+1) { margin-left: 0; } } } @if $breakpoint == 'medium-down--' { @include respond-to('medium-down') { //Reset previous margins .#{$breakpoint}one-half.#{$breakpoint}one-half, .#{$breakpoint}eight.#{$breakpoint}eight, .#{$breakpoint}one-third.#{$breakpoint}one-third, .#{$breakpoint}one-fourth.#{$breakpoint}one-fourth, .#{$breakpoint}four.#{$breakpoint}four, .#{$breakpoint}one-fifth.#{$breakpoint}one-fifth, .#{$breakpoint}one-sixth.#{$breakpoint}one-sixth, .#{$breakpoint}one-seventh.#{$breakpoint}one-seventh, .#{$breakpoint}two.#{$breakpoint}two { margin-right: #{$gutter}; margin-left: #{$gutter}; } //Set new margins on right .#{$breakpoint}one-half:nth-of-type(2n), .#{$breakpoint}eight:nth-of-type(2n), .#{$breakpoint}one-third:nth-of-type(3n), .#{$breakpoint}one-fourth:nth-of-type(4n), .#{$breakpoint}four:nth-of-type(4n), .#{$breakpoint}one-fifth:nth-of-type(5n), .#{$breakpoint}one-sixth:nth-of-type(6n), .#{$breakpoint}one-seventh:nth-of-type(7n), .#{$breakpoint}two:nth-of-type(8n) { margin-right: 0; } //Set new margins on left .#{$breakpoint}one-half:nth-of-type(2n+1), .#{$breakpoint}eight:nth-of-type(2n+1), .#{$breakpoint}one-third:nth-of-type(3n+1), .#{$breakpoint}one-fourth:nth-of-type(4n+1), .#{$breakpoint}four:nth-of-type(4n+1), .#{$breakpoint}one-fifth:nth-of-type(5n+1), .#{$breakpoint}one-sixth:nth-of-type(6n+1), .#{$breakpoint}one-seventh:nth-of-type(7n+1), .#{$breakpoint}two:nth-of-type(8n+1) { margin-left: 0; } } } @if $breakpoint == 'small-down--' { @include respond-to('small-down') { //Reset previous margins .#{$breakpoint}one-half.#{$breakpoint}one-half, .#{$breakpoint}eight.#{$breakpoint}eight, .#{$breakpoint}one-third.#{$breakpoint}one-third, .#{$breakpoint}one-fourth.#{$breakpoint}one-fourth, .#{$breakpoint}four.#{$breakpoint}four, .#{$breakpoint}one-fifth.#{$breakpoint}one-fifth, .#{$breakpoint}one-sixth.#{$breakpoint}one-sixth, .#{$breakpoint}one-seventh.#{$breakpoint}one-seventh, .#{$breakpoint}two.#{$breakpoint}two { margin-right: #{$gutter}; margin-left: #{$gutter}; } //Set new margins on right .#{$breakpoint}one-half:nth-of-type(2n), .#{$breakpoint}eight:nth-of-type(2n), .#{$breakpoint}one-third:nth-of-type(3n), .#{$breakpoint}one-fourth:nth-of-type(4n), .#{$breakpoint}four:nth-of-type(4n), .#{$breakpoint}one-fifth:nth-of-type(5n), .#{$breakpoint}one-sixth:nth-of-type(6n), .#{$breakpoint}one-seventh:nth-of-type(7n), .#{$breakpoint}two:nth-of-type(8n) { margin-right: 0; } //Set new margins on left .#{$breakpoint}one-half:nth-of-type(2n+1), .#{$breakpoint}eight:nth-of-type(2n+1), .#{$breakpoint}one-third:nth-of-type(3n+1), .#{$breakpoint}one-fourth:nth-of-type(4n+1), .#{$breakpoint}four:nth-of-type(4n+1), .#{$breakpoint}one-fifth:nth-of-type(5n+1), .#{$breakpoint}one-sixth:nth-of-type(6n+1), .#{$breakpoint}one-seventh:nth-of-type(7n+1), .#{$breakpoint}two:nth-of-type(8n+1) { margin-left: 0; } } } .#{$breakpoint}one-whole:nth-of-type(1n+1) { width: 100%; margin-right: 0; margin-left: 0; } .#{$breakpoint}one-half { width: calc(#{percentage(1 / 2)} - (#{$gutter} - (#{$gutter} / 2)));} .#{$breakpoint}one-third { width: calc(#{percentage(1 / 3)} - (#{$gutter} - (#{$gutter} / 3)));} .#{$breakpoint}one-fifth { width: calc(#{percentage(1 / 5)} - (#{$gutter} - (#{$gutter} / 5)));} .#{$breakpoint}one-fourth { width: calc(#{percentage(1 / 4)} - (#{$gutter} - (#{$gutter} / 4)));} .#{$breakpoint}one-sixth { width: calc(#{percentage(1 / 6)} - (#{$gutter} - (#{$gutter} / 6)));} .#{$breakpoint}one-seventh { width: calc(#{percentage(1 / 7)} - (#{$gutter} - (#{$gutter} / 7)));} .#{$breakpoint}two { width: calc(#{percentage(2 / 16)} - (#{$gutter} - (#{$gutter} / 8)));} .#{$breakpoint}four { width: calc(#{percentage(4 / 16)} - (#{$gutter} - (#{$gutter} / 4)));} .#{$breakpoint}seven { width: calc(#{percentage(7 / 16)} - (#{$gutter} - (#{$gutter} / 2)));} .#{$breakpoint}eight { width: calc(#{percentage(8 / 16)} - (#{$gutter} / 2));} .#{$breakpoint}nine { width: calc(#{percentage(9 / 16)} - (#{$gutter} - (#{$gutter} / 2)));} } // Remove side gutter on all columns .has-no-side-gutter { &.has-background { padding-right: 0px; padding-left: 0px; } .#{$breakpoint}one-whole, .#{$breakpoint}one-half, .#{$breakpoint}eight, .#{$breakpoint}one-third, .#{$breakpoint}two-thirds, .#{$breakpoint}one-fourth, .#{$breakpoint}four, .#{$breakpoint}one-fifth, .#{$breakpoint}three-fifths, .#{$breakpoint}two-fifths, .#{$breakpoint}one-sixth, .#{$breakpoint}one-seventh, .#{$breakpoint}one-eighth, .#{$breakpoint}two { margin-right: 0; margin-left: 0; } .#{$breakpoint}one-whole { width: 100%;} .#{$breakpoint}one-half { width: percentage(1 / 2);} .#{$breakpoint}one-third { width: percentage(1 / 3);} .#{$breakpoint}one-fourth { width: percentage(1 / 4);} .#{$breakpoint}one-fifth { width: percentage(1 / 5);} .#{$breakpoint}two-fifths { width: percentage(2 / 5);} .#{$breakpoint}three-fifths { width: percentage(3 / 5);} .#{$breakpoint}one-sixth { width: percentage(1 / 6);} .#{$breakpoint}one-seventh { width: percentage(1 / 7);} .#{$breakpoint}one-eighth { width: percentage(1 / 8);} .#{$breakpoint}two-thirds { width: percentage(2 / 3);} .#{$breakpoint}two { width: percentage(2 / 16);} .#{$breakpoint}four { width: percentage(4 / 16);} .#{$breakpoint}seven { width: percentage(7 / 16);} .#{$breakpoint}eight { width: percentage(8 / 16);} .#{$breakpoint}nine { width: percentage(9 / 16);} } } /*================ Build Base Grid Classes ================*/ @include container-column-generator(); @include responsive-display-helper(); @include responsive-text-align-helper(); /*============================================================================ Generate breakpoint-specific column widths and push classes - Default column widths: $breakpoint-has-widths: ($small, $medium-up); - Default is no push classes - Will not work if `styles/global/grid.scss` is removed ==============================================================================*/ $breakpoint-has-widths: ($large-down, $medium-down, $small-down); $breakpoint-has-push: (); /*================ Build Responsive Grid Classes ================*/ @each $breakpoint in $breakpoint-has-widths { @include respond-to($breakpoint) { @include container-column-generator('#{$breakpoint}--'); @include responsive-display-helper('#{$breakpoint}--'); @include responsive-text-align-helper('#{$breakpoint}--'); } } /*================ Build Grid Push Classes ================*/ @each $breakpoint in $breakpoint-has-push { @include respond-to($breakpoint) { @include grid-push-generator('#{$breakpoint}--'); } } /* # Control ================================================== */ $control-radius: $radius !default; $control-radius-small: $radius-small !default; $control-border-width: 1px !default; $control-height: 2.25em !default; $control-line-height: 1.5 !default; $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default; $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default; @mixin control { -moz-appearance: none; -webkit-appearance: none; @include align-items(center); border: $control-border-width solid transparent; border-radius: 0; //Was $control-radius box-shadow: none; @include inline-flexbox(); font-size: $size-normal; height: $control-height; @include justify-content(flex-start); line-height: $control-line-height; padding-bottom: $control-padding-vertical; padding-left: $control-padding-horizontal; padding-right: $control-padding-horizontal; padding-top: $control-padding-vertical; position: relative; vertical-align: top; // States &:focus, &.is-focused, &:active, &.is-active { outline: none; } &[disabled], fieldset[disabled] & { cursor: not-allowed; } } %control { @include control; } // The controls sizes use mixins so they can be used at different breakpoints @mixin control-small { border-radius: $control-radius-small; font-size: $size-small; } @mixin control-medium { font-size: $size-medium; } @mixin control-large { font-size: $size-large; } /* # Media ================================================== */ .media { @include align-items(flex-start); @include flexbox(); text-align: left; .content:not(:last-child) { margin-bottom: 0.75rem; } .media { border-top: 1px solid rgba($border, 0.5); @include flexbox(); padding-top: 0.75rem; .content:not(:last-child), .control:not(:last-child) { margin-bottom: 0.5rem; } .media { padding-top: 0.5rem; & + .media { margin-top: 0.5rem; } } } & + .media { border-top: 1px solid rgba($border, 0.5); margin-top: 1rem; padding-top: 1rem; } // Sizes &.is-large { & + .media { margin-top: 1.5rem; padding-top: 1.5rem; } } } .media-left, .media-right { @include flex-basis(auto); @include flex-grow(0); @include flex-shrink(0); } .media-left { margin-right: 1rem; } .media-right { margin-left: 1rem; } .media-content { @include flex-basis(auto); @include flex-grow(1); @include flex-shrink(1); text-align: left; } /* # Tile ================================================== */ .tile { @include flexbox(); @include align-items(stretch); display: block; @include flex-basis(0); @include flex-grow(1); @include flex-shrink(1); min-height: min-content; overflow: hidden; // Images .tile-image { display: block; } // Modifiers &.is-ancestor { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; &:last-child { margin-bottom: -0.75rem; } &:not(:last-child) { margin-bottom: 0.75rem; } } &.is-child { margin: 0 !important; } &.is-parent { padding: 0.75rem; } &.is-vertical { flex-direction: column; & > .tile.is-child:not(:last-child) { margin-bottom: 1.5rem !important; } } // Responsiveness @include respond-to('small-up') { &:not(.is-child) { @include flexbox(); } @for $i from 1 through 12 { &.is-#{$i} { flex: none; width: $i / 12 * 100%; } } } } /* # Badge ================================================== */ $badge-border-size: 0.1rem !default; $badge-border-radius: 1rem !default; $badge-color: ; $badge-size: 1rem; .header-cart__icon { @include flexbox(); @include justify-content(center); position: relative; width: max-content; margin: 0 auto; } .badge { height: $badge-size; width: $badge-size; top: calc(#{$badge-size} * -0.3); left: calc(65% - 0.2rem); font-size: 0.7rem; background: $badge-color; color: $background; @include flexbox(); @include justify-content(center); @include align-items(center); border-radius: 50%; letter-spacing: 0; } /* # Button ================================================== */ $button-color: $grey-darker !default; $button-background-color: $white !default; $button-border-color: $grey-lighter !default; $button-border-width: $control-border-width !default; $button-font: ; $button-font-fallback: ; $button-font-weight: ; $button-letter-spacing: px; $button-font-capitalization: ; $button-font-style: ; $button-padding-vertical: calc(0.375em - #{$button-border-width}) !default; $button-padding-horizontal: 1em !default; $button-hover-color: $link-hover !default; $button-hover-border-color: $link-hover-border !default; $button-focus-color: $link-focus !default; $button-focus-border-color: $link-focus-border !default; $button-focus-box-shadow-size: 0 0 0 0.125em !default; $button-focus-box-shadow-color: rgba($link, 0.25) !default; $button-active-color: $link-active !default; $button-active-border-color: $link-active-border !default; $button-text-color: $text !default; $button-text-hover-background-color: $background !default; $button-text-hover-color: $text-strong !default; $button-disabled-background-color: $white !default; $button-disabled-border-color: $grey-lighter !default; $button-disabled-shadow: none !default; $button-disabled-opacity: 0.5 !default; $button-static-color: $grey !default; $button-static-background-color: $white-ter !default; $button-static-border-color: $grey-lighter !default; // The button sizes use mixins so they can be used at different breakpoints @mixin button-small { font-size: $size-small; } @mixin button-normal { font-size: $size-normal; } @mixin button-medium { font-size: $size-medium; } @mixin button-large { font-size: $size-large; line-height: 1.25em; width: 100%; } .button { @extend %control; @extend %unselectable; font-family: $button-font, $button-font-fallback; font-weight: $button-font-weight; font-style: $button-font-style; letter-spacing: $button-letter-spacing; background-color: $button-background-color; border-color: $button-border-color; border-width: $button-border-width; color: $button-color; font-display: swap; cursor: pointer; @include justify-content(center); padding-bottom: $button-padding-vertical; padding-left: $button-padding-horizontal; padding-right: $button-padding-horizontal; padding-top: $button-padding-vertical; text-align: center; text-transform: $button-font-capitalization; transition: background 0.2s ease-in-out; white-space: nowrap; strong { color: inherit; } .icon { &, &.is-small, &.is-medium, &.is-large { height: 1.5em; width: 1.5em; } &:first-child:not(:last-child) { margin-left: calc(-0.375em - #{$button-border-width}); margin-right: 10px; } &.icon--cart { font-size: 14px; // Declaring fixed font size for add to cart icon } &.icon--right { margin-left: 10px; margin-right: calc(-0.375em - #{$button-border-width}); } &:first-child:last-child { margin-left: calc(-0.375em - #{$button-border-width}); margin-right: calc(-0.375em - #{$button-border-width}); } } // States &:hover, &.is-hovered { border-color: $button-hover-border-color; color: $button-hover-color; } &:focus, &.is-focused { border-color: $button-focus-border-color; color: $button-focus-color; &:not(:active) { box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; } } &:active, &.is-active { border-color: $button-active-border-color; color: $button-active-color; } &.is-inverse { background-color: $button-color; border-color: transparent; color: $button-background-color; } // Colors &.is-text { background-color: transparent; border-color: transparent; color: $button-text-color; text-decoration: underline; &:hover, &.is-hovered, &:focus, &.is-focused { background-color: $button-text-hover-background-color; color: $button-text-hover-color; } &:active, &.is-active { background-color: darken($button-text-hover-background-color, 5%); color: $button-text-hover-color; } &[disabled], fieldset[disabled] & { background-color: transparent; border-color: transparent; box-shadow: none; } } // Sizes &.is-small { @include button-small; } &.is-normal { @include button-normal; } &.is-medium { @include button-medium; } &.is-large { @include button-large; } // Modifiers &[disabled], fieldset[disabled] & { box-shadow: $button-disabled-shadow; opacity: $button-disabled-opacity; } &.is-fullwidth { @include flexbox(); width: 100%; } &.is-loading { color: transparent !important; pointer-events: none; &::after { @extend %loader; @include center(1em); position: absolute !important; } } &.is-loading--icon-only { background: transparent !important; // Override any button background border: transparent !important; // Override any button border font-size: 2rem !important; // Override button font size outline: none; &::after { color: $text; } } &.is-static { background-color: $button-static-background-color; border-color: $button-static-border-color; color: $button-static-color; box-shadow: none; pointer-events: none; } &.is-rounded { border-radius: $radius-rounded; padding-left: 1em; padding-right: 1em; } } .buttons { @include align-items(center); @include flexbox(); @include flex-wrap(wrap); @include justify-content(flex-start); // Sizes &.are-small { .button:not(.is-normal):not(.is-medium):not(.is-large) { @include button-small; } } &.are-medium { .button:not(.is-small):not(.is-normal):not(.is-large) { @include button-medium; } } &.are-large { .button:not(.is-small):not(.is-normal):not(.is-medium) { @include button-large; } } &.has-addons { .button { &:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } &:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: -1px; } &:last-child { margin-right: 0; } &:hover, &.is-hovered { z-index: 2; } &:focus, &.is-focused, &:active, &.is-active, &.is-selected { z-index: 3; &:hover { z-index: 4; } } &.is-expanded { @include flex-grow(1); } } } &.is-center { @include justify-content(center); } &.is-right { @include justify-content(flex-end); } } // Variables for the different button styles: primary, secondary, and add-to-cart $btn-primary-font-size: 1.25rem; $btn-primary-line-height: 1.25; $btn-primary-width: 100%; $btn-primary-border-radius: px; $btn-primary-text-color: ; $btn-primary-text-color-highlight: ; $btn-primary-bg-color: ; $btn-primary-bg-color-highlight: ; $btn-primary-border-color: ; $btn-primary-border-color-highlight: ; $btn-secondary-font-size: 1.25rem; $btn-secondary-line-height: 1.25; $btn-secondary-width: 100%; $btn-secondary-border-radius: px; $btn-secondary-text-color: ; $btn-secondary-text-color-highlight: ; $btn-secondary-bg-color: ; $btn-secondary-bg-color-highlight: ; $btn-secondary-border-color: ; $btn-secondary-border-color-highlight: ; $btn-link-style-font-size: 1.25rem; $btn-link-style-line-height: 1.25; $btn-link-style-text-color: ; $btn-link-style-text-color-highlight: ; $btn-add-to-cart-font-size: 1.25rem; $btn-add-to-cart-width: 100% !important; $btn-add-to-cart-line-height: 1.25; $btn-add-to-cart-border-radius: px; $btn-add-to-cart-text-color: ; $btn-add-to-cart-text-color-highlight: ; $btn-add-to-cart-bg-color: ; $btn-add-to-cart-bg-color-highlight: ; $btn-add-to-cart-border-color: ; $btn-add-to-cart-border-color-highlight: ; // Button Mixins (1-2-3) @mixin btn-primary { font-size: $btn-primary-font-size; border-radius: $btn-primary-border-radius; width: $btn-primary-width; line-height: $btn-primary-line-height; height: auto; max-width: 100%; white-space: normal; // States &, &:link, &:visited { color: $btn-primary-text-color; background-color: $btn-primary-bg-color; border-color: $btn-primary-border-color; } &:hover, &.is-hovered { color: $btn-primary-text-color-highlight; border-color: $btn-primary-border-color-highlight; background-color: $btn-primary-bg-color-highlight; } &:focus, &.is-focused { color: $btn-primary-text-color-highlight; border-color: $btn-primary-border-color-highlight; background-color: $btn-primary-bg-color-highlight; &:not(:active) { box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; } } &:active, &.is-active { color: $btn-primary-text-color-highlight; border-color: $btn-primary-border-color-highlight; background-color: $btn-primary-bg-color-highlight; } &.is-inverted { color: $btn-primary-bg-color; background-color: $btn-primary-text-color; border-color: $btn-primary-bg-color; } // Sizes &.is-small { @include button-small; } &.is-normal { @include button-normal; } &.is-medium { @include button-medium; } &.is-large { @include button-large; } } @mixin btn-secondary { font-size: $btn-secondary-font-size; border-radius: $btn-secondary-border-radius; line-height: $btn-secondary-line-height; width: $btn-secondary-width; height: auto; max-width: 100%; white-space: normal; // States &, &:link, &:visited { color: $btn-secondary-text-color; background-color: $btn-secondary-bg-color; border-color: $btn-secondary-border-color; } &:hover, &.is-hovered { color: $btn-secondary-text-color-highlight; border-color: $btn-secondary-border-color-highlight; background-color: $btn-secondary-bg-color-highlight; } &:focus, &.is-focused { color: $btn-secondary-text-color-highlight; border-color: $btn-secondary-border-color-highlight; background-color: $btn-secondary-bg-color-highlight; &:not(:active) { box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; } } &:active, &.is-active { color: $btn-secondary-text-color-highlight; border-color: $btn-secondary-border-color-highlight; background-color: $btn-secondary-bg-color-highlight; } &.is-inverted { color: $btn-secondary-bg-color; background-color: $btn-secondary-text-color; border-color: $btn-secondary-bg-color; } // Sizes &.is-small { @include button-small; } &.is-normal { @include button-normal; } &.is-medium { @include button-medium; } &.is-large { @include button-large; } } @mixin btn-link-style { font-size: $btn-link-style-font-size; border: none; border-bottom: px ; height: auto; line-height: $btn-link-style-line-height; padding: 0; transition: $transition-speed linear; background: transparent; max-width: 100%; white-space: normal; // States &, &:link, &:visited { color: $btn-link-style-text-color; border-bottom-color: $btn-link-style-text-color; } &:hover, &.is-hovered { color: $btn-link-style-text-color-highlight; border-bottom-color: $btn-link-style-text-color-highlight !important; } &:focus, &.is-focused { color: $btn-link-style-text-color-highlight; border-bottom-color: $btn-link-style-text-color-highlight; } &:active, &.is-active { color: $btn-link-style-text-color-highlight; border-bottom-color: $btn-link-style-text-color-highlight; } &.is-within-form { padding-bottom: $button-padding-vertical; padding-left: $button-padding-horizontal; padding-right: $button-padding-horizontal; padding-top: $button-padding-vertical; } } @mixin btn-add-to-cart { font-size: $btn-add-to-cart-font-size; border-radius: $btn-add-to-cart-border-radius; width: $btn-add-to-cart-width; line-height: $btn-add-to-cart-line-height; // States &, &:link, &:visited { color: $btn-add-to-cart-text-color; background-color: $btn-add-to-cart-bg-color; border-color: $btn-add-to-cart-border-color; } &:hover, &.is-hovered { color: $btn-add-to-cart-text-color-highlight; border-color: $btn-add-to-cart-border-color-highlight !important; background-color: $btn-add-to-cart-bg-color-highlight; } &:focus, &.is-focused { color: $btn-add-to-cart-text-color-highlight; border-color: $btn-add-to-cart-border-color-highlight; background-color: $btn-add-to-cart-bg-color-highlight; &:not(:active) { box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; } } &:active, &.is-active { color: $btn-add-to-cart-text-color-highlight; border-color: $btn-add-to-cart-border-color-highlight; background-color: $btn-add-to-cart-bg-color-highlight; } &.is-inverted { color: $btn-add-to-cart-bg-color; background-color: $btn-add-to-cart-text-color; border-color: $btn-add-to-cart-bg-color; } // Sizes &.is-small { @include button-small; } &.is-normal { @include button-normal; } &.is-medium { @include button-medium; } &.is-large { @include button-large; } } .button--primary, a.button--primary.button { @include btn-primary; } .button--secondary, .action_button--secondary, a.button--secondary.button { @include btn-secondary; } .button--link-style, a.button--link-style.button { @include btn-link-style; } .button--add-to-cart, a.button--add-to-cart.button { @include btn-add-to-cart; } .shopify-challenge__button { @include btn-primary; padding: 0.5em 4em; } /* # Content ================================================== */ $content-heading-color: $text-strong !default; $content-heading-weight: $weight-semibold !default; $content-heading-line-height: 1.125 !default; $content-blockquote-background-color: $background !default; $content-blockquote-border-left: 5px solid $border !default; $content-blockquote-padding: 1.25em 1.5em !default; $content-pre-padding: 1.25em 1.5em !default; $content-table-cell-border: 1px solid $border !default; $content-table-cell-border-width: 0px !default; $content-table-cell-padding: 0.5em 0.75em !default; $content-table-cell-heading-color: $text-strong !default; $content-table-head-cell-border-width: 0 0 2px !default; $content-table-head-cell-color: $text-strong !default; $content-table-foot-cell-border-width: 2px 0 0 !default; $content-table-foot-cell-color: $text-strong !default; .content { @extend %block; // Inline li + li { margin-top: 0.25em; } // Block p, dl, ol, ul, blockquote, pre, table { &:not(:last-child) { margin-bottom: 1em; } } h1 { font-size: 2em; margin-bottom: 0.5em; word-wrap: break-word; &:not(:first-child) { margin-top: 1em; } } h2 { font-size: 1.75em; margin-bottom: 0.5714em; word-wrap: break-word; &:not(:first-child) { margin-top: 1.1428em; } } h3 { font-size: 1.5em; margin-bottom: 0.6666em; word-wrap: break-word; &:not(:first-child) { margin-top: 1.3333em; } } h4 { font-size: 1.25em; margin-bottom: 0.8em; word-wrap: break-word; } h5 { font-size: 1.125em; margin-bottom: 0.8888em; word-wrap: break-word; } h6 { font-size: 1em; margin-bottom: 1em; word-wrap: break-word; } blockquote { background-color: $content-blockquote-background-color; border-left: $content-blockquote-border-left; padding: $content-blockquote-padding; } ol { list-style-position: outside; margin-left: 2em; margin-top: 1em; &:not([type]) { list-style-type: decimal; &.is-lower-alpha { list-style-type: lower-alpha; } &.is-lower-roman { list-style-type: lower-roman; } &.is-upper-alpha { list-style-type: upper-alpha; } &.is-upper-roman { list-style-type: upper-roman; } } } ul { list-style: disc outside; margin-left: 2em; margin-top: 1em; ul { list-style-type: circle; margin-top: 0.5em; ul { list-style-type: square; } } } dd { margin-left: 2em; } figure { margin-left: 2em; margin-right: 2em; text-align: center; &:not(:first-child) { margin-top: 2em; } &:not(:last-child) { margin-bottom: 2em; } img { display: inline-block; } figcaption { font-style: italic; } } pre { @include overflow-touch; overflow-x: auto; padding: $content-pre-padding; white-space: pre; word-wrap: normal; } sup, sub { font-size: 75%; } table { width: 100%; td, th { border: $content-table-cell-border; border-width: $content-table-cell-border-width; padding: $content-table-cell-padding; vertical-align: top; } th { color: $content-table-cell-heading-color; text-align: left; } thead { td, th { border-width: $content-table-head-cell-border-width; color: $content-table-head-cell-color; } } tfoot { td, th { border-width: $content-table-foot-cell-border-width; color: $content-table-foot-cell-color; } } } // Sizes &.is-small { font-size: $size-small; } &.is-medium { font-size: $size-medium; } &.is-large { font-size: $size-large; } } /* # Icon ================================================== */ $icon-dimensions: 1.2rem !default; $icon-dimensions-small: 1rem !default; $icon-dimensions-medium: 1.2rem !default; $icon-dimensions-large: 1.8rem !default; .icon { @include align-items(center); @include inline-flexbox(); @include justify-content(center); height: $icon-dimensions; width: $icon-dimensions; fill: currentColor; // Sizes .is-large & { height: $icon-dimensions-large; width: $icon-dimensions-large; } .is-medium & { height: $icon-dimensions-medium; width: $icon-dimensions-medium; } .is-small & { height: $icon-dimensions-small; width: $icon-dimensions-small; } svg { height: 100%; width: 100%; } } /* # Image ================================================== */ /* Lazyloading styles */ //Ensures that small images are not stretched larger .image__container { display: block; margin-left: auto; margin-right: auto; font-size: 0; //Make sure there is no space for descender characters img { width: 100%; } } .image-element__wrap { overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; } .image-element__wrap img { height: auto; width: 100%; margin-left: auto; margin-right: auto; display: block; } .has-image-crop { .image-element__wrap { height: 100%; } img { height: 100% !important; //overrides inline height styles @include object-fit(cover) } &.image-crop--left { img { @include object-fit(cover, left) } } &.image-crop--right { img { @include object-fit(cover, right) } } &.image-crop--center { img { @include object-fit(cover, center) } } &.image-crop--none { img { @include object-fit(contain, top) } } } /* # Notification ================================================== */ $notification-background-color: $grey-lighter !default; $notification-radius: $radius !default; $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default; .notification { @extend %block; background-color: $notification-background-color; border-radius: $notification-radius; padding: $notification-padding; position: relative; a:not(.button):not(.dropdown-item) { color: currentColor; text-decoration: underline; } strong { color: currentColor; } code, pre { background: $white; } pre code { background: transparent; } & > .delete { position: absolute; right: 0.5rem; top: 0.5rem; } .title, .subtitle, .content { color: currentColor; } } /* # Other ================================================== */ .block { @extend %block; } .delete { @extend %delete; } .close { @extend %close; } .highlight { @extend %block; font-weight: $weight-normal; max-width: 100%; overflow: hidden; padding: 0; pre { overflow: auto; max-width: 100%; } } .loader { @extend %loader; } .number { @include align-items(center); background-color: $background; border-radius: $radius-rounded; @include inline-flexbox(); font-size: $size-medium; height: 2em; @include justify-content(center); margin-right: 1.5rem; min-width: 2.5em; padding: 0.25rem 0.5rem; text-align: center; vertical-align: top; } /* # Placeholder ================================================== */ $color-blankstate: rgba($text, 0.35); $color-blankstate-border: rgba($text, 0.2); $color-blankstate-background: rgba($text, 0.1); .placeholder-svg { display: block; fill: $color-blankstate; background-color: $color-blankstate-background; width: 100%; height: 100%; max-width: 100%; max-height: 100%; border: 1px solid $color-blankstate-border; } // Mimic a background image by wrapping the placeholder svg with this class .placeholder-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; .icon { border: 0; } } /* # Social share ================================================== */ $twitter: #1DA1F1; $facebook: #4266B2; $pinterest: #E50122; $mail: #F14336; .share-btn { &.share-btn--twitter .button { color: $twitter; &:hover { border-color: $twitter; background-color: $twitter; } } &.share-btn--facebook .button { color: $facebook; &:hover { border-color: $facebook; background-color: $facebook; } } &.share-btn--pinterest .button { color: $pinterest; &:hover { border-color: $pinterest; background-color: $pinterest; } } &.share-btn--mail .button { color: $mail; &:hover { border-color: $mail; background-color: $mail; } } .button { width: 38px; height: 38px; &:hover { color: #FFFFFF; } } } .social-share-buttons--rounded .button { border-radius: 50%; } /* # Tag ================================================== */ $tag-background-color: $grey-lighter !default; $tag-color: $text !default; $tag-radius: $radius !default; $tag-delete-margin: 1px !default; .tags { @include align-items(center); @include flexbox(); @include flex-wrap(wrap); @include justify-content(flex-start); .tag { margin-bottom: 0.5rem; &.tag--solid { background-color: $tag-solid-light; a { color: $link; } &:hover { background-color: $tag-solid-dark; a { color: $link-invert; } } } &.tag--outline { background-color: transparent; border: 1px solid $link; a { color: $link; } &:hover { background-color: $link; a { color: $link-invert; } } } &:not(:last-child) { margin-right: 0.5rem; } } &:last-child { margin-bottom: -0.5rem; } &:not(:last-child) { margin-bottom: 0; } // Sizes &.are-medium { .tag:not(.is-normal):not(.is-large) { font-size: $size-normal; } } &.are-large { .tag:not(.is-normal):not(.is-medium) { font-size: $size-medium; } } &.are-outline { .tag:not(.is-regular) { background-color: transparent; border: 1px solid $tag-color; } } &.has-addons { .tag { margin-right: 0; &:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } &:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } } } &.is-center { @include justify-content(center); .tag { margin-right: 0.25rem; margin-left: 0.25rem; } } &.is-right { @include justify-content(flex-end); .tag { &:not(:first-child) { margin-left: 0.5rem; } &:not(:last-child) { margin-right: 0; } } } &.has-addons { .tag { margin-right: 0; &:not(:first-child) { margin-left: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } &:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } } } } .tag:not(body) { @include align-items(center); background-color: $tag-background-color; border-radius: $tag-radius; color: $tag-color; @include inline-flexbox(); font-size: $size-small; height: 2em; @include justify-content(center); line-height: 1.5; padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; margin-bottom: 0.3em; transition: background-color $transition-speed ease-in-out; a { color: $tag-color; } .delete { margin-left: 0.25rem; margin-right: -0.375rem; } // Sizes &.is-normal { font-size: $size-small; } &.is-medium { font-size: $size-normal; } &.is-large { font-size: $size-medium; } .icon { &:first-child:not(:last-child) { margin-left: -0.375em; margin-right: 0.1875em; } &:last-child:not(:first-child) { margin-left: 0.1875em; margin-right: -0.375em; } &:first-child:last-child { margin-left: -0.375em; margin-right: -0.375em; } } // Modifiers &.is-delete { margin-left: $tag-delete-margin; padding: 0; position: relative; width: 2em; &::before, &::after { background-color: currentColor; content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } &::before { height: 1px; width: 50%; } &::after { height: 50%; width: 1px; } &:hover, &:focus { background-color: darken($tag-background-color, 5%); } &:active { background-color: darken($tag-background-color, 10%); } } &.is-rounded { border-radius: $radius-rounded; } &.is-outline { background-color: transparent; border: 1px solid $tag-color; } } a.tag { &:hover { text-decoration: underline; } } // Product stickers .tag--sale:not(body) { @include sale-sticker; } .tag--new:not(body) { @include new-sticker; } .tag--best-seller:not(body) { @include bestseller-sticker; } .tag--coming-soon:not(body) { @include comingsoon-sticker; } .tag--staff-pick:not(body) { @include staffpick-sticker; } .tag--pre-order:not(body) { @include preorder-sticker; } /* # AJAX cart - mini and drawer ================================================== */ $drop-down-menu-hover-color: !default; $drop-down-menu-active-color: !default; .cart__count--text { &::before { content: '('; } &::after { content: ')'; } } #theme-ajax-cart { z-index: 50; max-height: 100vh; overflow-y: auto; box-shadow: 0 8px 8px rgba($black, 0.1); @include respond-to('medium-down') { z-index: 70; } } // Global ajax cart styling .ajax-cart { width: 100%; font-size: px; letter-spacing: ; text-transform: ; text-shadow: none; color: $text; a, a:active, a:visited { color: $drop-down-menu-active-color; } a:hover { color: $drop-down-menu-hover-color; } } .is-drawer, .is-mini-cart .card { background-color: ; } .ajax-cart__close-icon { position: absolute; right: 0; margin: 15px 10px; cursor: pointer; } .ajax-cart__cart-title { padding: 1rem 1rem; font-weight: bold; border-bottom: 2px solid rgba($border, 0.5); } .ajax-cart__product { @include align-items(center); padding: 1rem 1rem 0; margin-top: 0; position: relative; min-height: 120px; &:last-child { margin-bottom: 1rem; } } .ajax-cart__product-image { width: 20%; } .ajax-cart__quantity-box { max-width: 150px; margin-top: 10px; .quantity-wrapper.quantity-style--box .quantity-input-control--fill { width: auto; } } .ajax-cart__right-content { @include flexbox(); @include flex-direction(column); @include justify-content(space-between); @include align-items(flex-end); @include align-self(flex-start); } // Line item discounts .ajax-cart__price { padding: 5px 0; .was-price { margin-left: 3px; } } .ajax-cart__line-items-discount { .ajax-cart__price-comparison { @include flexbox(); p, s { padding: 5px 5px 5px 0; } } .line-item-discount__container { background: none; padding: 0; margin: 0; } } .ajax-cart__details-wrapper { border-top: 2px solid rgba($border, 0.5); padding: 1rem 1rem; .ajax-cart__details-row { padding: 10px 0; } .ajax-cart__row-description { @include respond-to('medium-down') { max-width: 50%; } } } .ajax-cart__note { width: 100%; min-height: 80px; margin-top: 20px; font-size: inherit; // Prevents cross-browser issues with font size } .ajax-cart__tos-checkbox { margin-top: 20px; } .ajax-cart__cart-message { margin-top: 20px; } .ajax-cart__empty-cart-message { .icon { height: 2.4rem; width: 2.4rem; } } .ajax-cart__empty-text { margin: 10px 0; } .ajax-cart__button { margin-top: 20px; width: 100%; } .ajax-cart__cart-link { margin-top: 20px; display: block; text-decoration: underline; } .ajax-cart__delete .close, .ajax-cart__delete:hover .close{ color: $text; } // Mini cart .show-mini-cart #theme-ajax-cart.is-mini-cart { opacity: 1; visibility: visible; transition: opacity 0.3s ease-in; } #theme-ajax-cart.is-mini-cart { position: absolute; top: 100%; width: 420px; right: 0; visibility: hidden; opacity: 0; transition: opacity 0.3s ease-in; .ajax-cart__empty-cart-message { padding-bottom: 1rem; } &.theme-ajax-cart--header-vertical { top: 60%; left: 0; max-height: 50vh; overflow-y: auto; @include respond-to('medium-down') { top: 100%; left: auto; right: 0; max-height: 80vh; } a { color: $link; &:hover { color: $link-hover; } } } } .ajax-cart--mini-cart .ajax-cart__close-icon { display: none; } // When touch events are enabled (tablet/mobile/touchscreens) on smaller screens, show close icon .touchevents { @include respond-to('large-down') { .ajax-cart--mini-cart .ajax-cart__close-icon { display: block; } } } // Drawer .ajax-cart--drawer { position: relative; z-index: 50; } .ajax-cart__overlay { position: fixed; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 49; background-color: rgba(0,0,0,0.8); right: -100%; opacity: 0; transition: opacity 0.2s; &.is-visible { right: 0; opacity: 1; } @include respond-to('medium-down') { background-color: rgba(0,0,0,0.5); } } #theme-ajax-cart.is-drawer { position: fixed; top: 0; height: 100%; bottom: 0; width: 40%; right: -40%; transition: right 0.3s ease-in-out; @include respond-to('medium-down') { width: 60%; right: -60%; } @include respond-to('small-down') { width: 100%; right: -100%; } &.is-visible { right: 0; } &.theme-ajax-cart--header-vertical { @include respond-to('medium-up') { width: 30%; right: auto; left: -30%; margin-left: 20%; transition: left 0.3s ease-in-out; &.is-visible { left: 0; } } } } /* # Breadcrumb ================================================== */ $breadcrumb-item-color: $link !default; $breadcrumb-item-hover-color: $link-hover !default; $breadcrumb-item-active-color: $link-hover !default; $breadcrumb-item-padding-vertical: 0 !default; $breadcrumb-item-padding-horizontal: 0.75em !default; $breadcrumb-item-separator-color: $link !default; .breadcrumb { @extend %unselectable; font-size: $size-normal; white-space: nowrap; a { @include align-items(center); color: $breadcrumb-item-color; @include flexbox(); @include justify-content(center); padding: 0; line-height: 1; &:hover { color: $breadcrumb-item-hover-color; } } li { @include align-items(center); @include flexbox(); line-height: 1; white-space: normal; &:not(.tag):first-child span { padding-left: 0; } &.is-active { a { color: $breadcrumb-item-active-color; cursor: default; pointer-events: none; } } } ul, ol { @include align-items(center); @include flexbox(); @include flex-wrap(wrap); @include justify-content(flex-start); @include respond-to('small-down') { @include justify-content(center); } } .icon { &:first-child { margin-right: 0.5em; } &:last-child { margin-left: 0.5em; } } // Alignment &.is-center { ol, ul { @include justify-content(center); } } &.is-right { ol, ul { @include justify-content(flex-end); } } // Sizes &.is-small { font-size: $size-small; .icon { height: $size-small; width: $size-small; } } &.is-regular { font-size: $size-normal; .icon { height: $size-normal; width: $size-normal; } } &.is-large { font-size: 1.2rem; .icon { height: 1.2rem; width: 1.2rem; } } .page-navigation-arrows a { display: inline; } } .page-navigation-arrows { @include flexbox(); @include align-items(center); @include respond-to('small-down') { @include justify-content(center); text-align: center; width: 100%; padding-top: 0; } .page-navigation__divider { padding: 0 5px; } } .breadcrumb-separator { @include flexbox(); @include align-items(flex-end); } .breadcrumb__container { @include respond-to('small-down') { @include flex-direction(column-reverse); @include flex-wrap(wrap); padding-bottom: 20px; } } /* # Card ================================================== */ $card-color: $text !default; $card-background-color: $background !default; $card-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) !default; $card-header-background-color: transparent !default; $card-header-shadow: 0 1px 2px rgba(black, 0.1) !default; $card-header-weight: $weight-bold !default; $card-content-background-color: transparent !default; $card-footer-background-color: transparent !default; $card-footer-border-top: 1px solid $border !default; .card { background-color: $card-background-color; box-shadow: $card-shadow; color: $card-color; max-width: 100%; position: relative; } .card-header { background-color: $card-header-background-color; @include align-items(stretch); box-shadow: $card-header-shadow; @include flexbox(); width: 100%; } .card-header-title { @include align-items(center); @include flexbox(); @include flex-grow(1); font-weight: $card-header-weight; padding: 0.75rem; &.is-center { @include justify-content(center); } } .card-header-icon { @include align-items(center); cursor: pointer; @include flexbox(); @include justify-content(center); padding: 0.75rem; } .card-image { display: block; position: relative; } .card-content { background-color: $card-content-background-color; padding: 1.5rem; } .card-footer { background-color: $card-footer-background-color; border-top: $card-footer-border-top; @include align-items(stretch); @include flexbox(); } .card-footer-item { @include align-items(center); @include flexbox(); @include flex-basis(0); @include flex-grow(1); @include flex-shrink(0); @include justify-content(center); padding: 0.75rem; &:not(:last-child) { border-right: $card-footer-border-top; } } /* # Commerce ================================================== */ // Compare at (original) price .was-price { text-decoration: line-through; opacity: 0.6; } /* # Form ================================================== */ $input-color: $grey-darker !default; $input-background-color: $white !default; $input-border-color: $grey-lighter !default; $input-height: $control-height !default; $input-shadow: none; $input-placeholder-color: rgba($input-color, 0.5) !default; $input-hover-color: $grey-darker !default; $input-hover-border-color: $grey-light !default; $input-focus-color: $grey-darker !default; $input-focus-border-color: $link !default; $input-focus-box-shadow-size: 0 0 0 0.125em !default; $input-focus-box-shadow-color: rgba($link, 0.25) !default; $input-disabled-color: $text-light !default; $input-disabled-background-color: $background !default; $input-disabled-border-color: $background !default; $input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default; $input-arrow: $link !default; $input-icon-color: $grey-lighter !default; $input-icon-active-color: $grey !default; $input-radius: $radius !default; $file-border-color: $border !default; $file-radius: $radius !default; $file-cta-background-color: $white-ter !default; $file-cta-color: $grey-dark !default; $file-cta-hover-color: $grey-darker !default; $file-cta-active-color: $grey-darker !default; $file-name-border-color: $border !default; $file-name-border-style: solid !default; $file-name-border-width: 1px 1px 1px 0 !default; $file-name-max-width: 16em !default; $label-color: $grey-darker !default; $label-weight: $body-weight; $help-size: $size-small !default; // Button border radius will determine input field border radius $input-field-with-primary-btn-style: px; $input-field-with-secondary-btn-style: px; $textarea-with-primary-btn-style: 0px; $textarea-with-secondary-btn-style: 0px; @mixin input { @extend %control; background-color: $input-background-color; border-color: $input-border-color; color: $input-color; @include placeholder { color: $input-placeholder-color; } &:hover, &.is-hovered { border-color: $input-hover-border-color; } &:focus, &.is-focused, &:active, &.is-active { border-color: $input-focus-border-color; box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color; } &[disabled], fieldset[disabled] & { background-color: $input-disabled-background-color; border-color: $input-disabled-border-color; box-shadow: none; color: $input-disabled-color; @include placeholder { color: $input-disabled-placeholder-color; } } } .input, .textarea { @include input; box-shadow: $input-shadow; max-width: 100%; width: 100%; &[readonly] { box-shadow: none; } // Sizes &.is-small { @include control-small; } &.is-medium { @include control-medium; } &.is-large { @include control-medium; // Consistent with button size height: 2em; } // Modifiers &.is-fullwidth { display: block; width: 100%; } &.is-inline { display: inline; width: auto; } } .input { &.is-rounded { border-radius: $radius-rounded; padding-left: 1em; padding-right: 1em; } &.is-static { background-color: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } &.is-primary-btn-style { border-radius: $input-field-with-primary-btn-style; padding-left: 1em; padding-right: 1em; } &.is-secondary-btn-style { border-radius: $input-field-with-secondary-btn-style; padding-left: 1em; padding-right: 1em; } } .textarea { display: block; max-width: 100%; min-width: 100%; padding: 0.625em; resize: vertical; &:not([rows]) { max-height: 600px; min-height: 120px; } &[rows] { height: initial; } // Modifiers &.has-fixed-size { resize: none; } &.is-rounded { border-radius: 5px; } &.is-primary-btn-style { border-radius: $textarea-with-primary-btn-style; } &.is-secondary-btn-style { border-radius: $textarea-with-secondary-btn-style; } } .checkbox, .radio { cursor: pointer; display: inline-block; line-height: 1.25; position: relative; input { cursor: pointer; } &:hover { color: $input-hover-color; } &[disabled], fieldset[disabled] & { color: $input-disabled-color; cursor: not-allowed; } } .radio { & + .radio { margin-left: 0.5em; } } .select { display: inline-block; max-width: 100%; position: relative; vertical-align: top; &:not(.is-multiple) { height: $input-height; } &:not(.is-multiple):not(.is-loading):not(.is-arrowless) { &::after { @extend %arrow; border-color: $input-arrow; right: 1.125em; z-index: 4; } } &.is-rounded { select { border-radius: $radius-rounded; padding-left: 1em; } } &.is-primary-btn-style { select { border-radius: $input-field-with-primary-btn-style; padding-left: 1em; } } &.is-secondary-btn-style { select { border-radius: $input-field-with-secondary-btn-style; padding-left: 1em; } } &.is-wide { width: 100%; select { width: inherit; } } select { @include input; cursor: pointer; display: block; font-size: 1em; max-width: 100%; outline: none; &::-ms-expand { display: none; } &[disabled]:hover, fieldset[disabled] &:hover { border-color: $input-disabled-border-color; } &:not([multiple]):not(.is-arrowless) { padding-right: 2.5em; } &[multiple] { height: auto; padding: 0; option { padding: 0.5em 1em; } } } // States &:not(.is-multiple):not(.is-loading):hover { &::after { border-color: $input-hover-color; } } // Sizes &.is-small { @include control-small; } &.is-medium { @include control-medium; } &.is-large { @include control-medium; // Consistent with button size } // Modifiers &.is-disabled { &::after { border-color: $input-disabled-color; } } &.is-fullwidth { width: 100%; select { width: 100%; } } &.is-loading { &::after { @extend %loader; margin-top: 0; position: absolute; right: 0.625em; top: 0.625em; transform: none; } &.is-small:after { font-size: $size-small; } &.is-medium:after { font-size: $size-medium; } &.is-large:after { font-size: $size-large; } } } .file { @extend %unselectable; @include align-items(stretch); @include flexbox(); @include justify-content(flex-start); position: relative; // Sizes &.is-small { font-size: $size-small; } &.is-medium { font-size: $size-medium; .file-icon { .fa { font-size: 21px; } } } &.is-large { font-size: $size-large; .file-icon { .fa { font-size: 28px; } } } // Modifiers &.has-name { .file-cta { border-bottom-right-radius: 0; border-top-right-radius: 0; } .file-name { border-bottom-left-radius: 0; border-top-left-radius: 0; } &.is-empty { .file-cta { border-radius: $file-radius; } .file-name { display: none; } } } &.is-boxed { .file-label { flex-direction: column; } .file-cta { flex-direction: column; height: auto; padding: 1em 3em; } .file-name { border-width: 0 1px 1px; } .file-icon { height: 1.5em; width: 1.5em; .fa { font-size: 21px; } } &.is-small { .file-icon .fa { font-size: 14px; } } &.is-medium { .file-icon .fa { font-size: 28px; } } &.is-large { .file-icon .fa { font-size: 35px; } } &.has-name { .file-cta { border-radius: $file-radius $file-radius 0 0; } .file-name { border-radius: 0 0 $file-radius $file-radius; border-width: 0 1px 1px; } } } &.is-center { @include justify-content(center); } &.is-fullwidth { .file-label { width: 100%; } .file-name { @include flex-grow(1); max-width: none; } } &.is-right { @include justify-content(flex-end); .file-cta { border-radius: 0 $file-radius $file-radius 0; } .file-name { border-radius: $file-radius 0 0 $file-radius; border-width: 1px 0 1px 1px; order: -1; } } } .file-label { @include align-items(stretch); @include flexbox(); cursor: pointer; @include justify-content(flex-start); overflow: hidden; position: relative; &:hover { .file-cta { background-color: darken($file-cta-background-color, 2.5%); color: $file-cta-hover-color; } .file-name { border-color: darken($file-name-border-color, 2.5%); } } &:active { .file-cta { background-color: darken($file-cta-background-color, 5%); color: $file-cta-active-color; } .file-name { border-color: darken($file-name-border-color, 5%); } } } .file-input { height: 100%; left: 0; opacity: 0; outline: none; position: absolute; top: 0; width: 100%; } .file-cta, .file-name { @extend %control; border-color: $file-border-color; border-radius: $file-radius; font-size: 1em; padding-left: 1em; padding-right: 1em; white-space: nowrap; } .file-cta { background-color: $file-cta-background-color; color: $file-cta-color; } .file-name { border-color: $file-name-border-color; border-style: $file-name-border-style; border-width: $file-name-border-width; display: block; max-width: $file-name-max-width; overflow: hidden; text-align: left; text-overflow: ellipsis; } .file-icon { @include align-items(center); @include flexbox(); height: 1em; @include justify-content(center); margin-right: 0.5em; width: 1em; .fa { font-size: 14px; } } .label, .selector-wrapper label { color: $label-color; display: block; font-size: $size-normal; font-weight: $label-weight; &:not(:last-child) { margin-bottom: 0.5em; } // Sizes &.is-small { font-size: $size-small; } &.is-medium { font-size: $size-medium; } &.is-large { font-size: $size-large; } } .help { display: block; font-size: $help-size; margin-top: 0.25rem; } // Containers .field { &:not(:last-child) { margin-bottom: 0.75rem; } // Modifiers &.has-addons { @include flexbox(); @include justify-content(flex-start); .control { &:not(:last-child) { margin-right: -1px; } &:not(:first-child):not(:last-child) { .button, .input, .select select { border-radius: 0; } } &:first-child:not(:only-child) { .button, .input, .select select { border-bottom-right-radius: 0; border-top-right-radius: 0; } } &:last-child:not(:only-child) { .button, .input, .select select { border-bottom-left-radius: 0; border-top-left-radius: 0; } } .button, .input, .select select { &:not([disabled]) { &:hover, &.is-hovered { z-index: 2; } &:focus, &.is-focused, &:active, &.is-active { z-index: 3; &:hover { z-index: 4; } } } } &.is-expanded { @include flex-grow(1); } } &.has-addons-center { @include justify-content(center); } &.has-addons-right { @include justify-content(flex-end); } &.has-addons-fullwidth { .control { @include flex-grow(1); @include flex-shrink(0); } } } &.is-grouped { @include flexbox(); @include justify-content(flex-start); & > .control { @include flex-shrink(0); &:not(:last-child) { margin-bottom: 0; margin-right: 0.75rem; } &.is-expanded { @include flex-grow(1); @include flex-shrink(1); } } &.is-grouped-center { @include justify-content(center); } &.is-grouped-right { @include justify-content(flex-end); } &.is-grouped-multiline { @include flex-wrap(wrap); & > .control { &:last-child, &:not(:last-child) { margin-bottom: 0.75rem; } } &:last-child { margin-bottom: -0.75rem; } &:not(:last-child) { margin-bottom: 0; } } } &.is-horizontal { @include respond-to('medium-up') { @include flexbox(); } } } .field-label { .label { font-size: inherit; } @include respond-to('small-up') { margin-bottom: 0.5rem; } @include respond-to('medium-up') { @include flex-basis(0); @include flex-grow(1); @include flex-shrink(0); margin-right: 1.5rem; text-align: right; &.is-small { font-size: $size-small; padding-top: 0.375em; } &.is-normal { padding-top: 0.375em; } &.is-medium { font-size: $size-medium; padding-top: 0.375em; } &.is-large { font-size: $size-large; padding-top: 0.375em; } } } .field-body { .field .field { margin-bottom: 0; } @include respond-to('medium-up') { @include flexbox(); @include flex-basis(0); flex-grow: 5; @include flex-shrink(1); .field { margin-bottom: 0; } & > .field { @include flex-shrink(1); &:not(.is-narrow) { @include flex-grow(1); } &:not(:last-child) { margin-right: 0.75rem; } } } } .control { box-sizing: border-box; clear: both; font-size: $size-normal; position: relative; text-align: left; // Modifiers &.has-icons-left, &.has-icons-right { .input, .select { &:focus { & ~ .icon { color: $input-icon-active-color; } } &.is-small ~ .icon { font-size: $size-very-small; } &.is-regular ~ .icon { font-size: $size-small; } &.is-medium ~ .icon { font-size: $size-normal; } &.is-large ~ .icon { font-size: $size-medium; } } .icon { color: $input-icon-color; height: 1.5em; pointer-events: none; position: absolute; top: 0; width: 1.8em; z-index: 4; } } &.has-icons-left { .input, .select select { padding-left: $input-height; } .icon { left: 0; top: 50%; @include prefix(transform, translate(40%, -50%), ms webkit spec); } } &.has-icons-right { .input, .select select { padding-right: $input-height; } .icon { right: 0; } } &.is-loading { &::after { @extend %loader; position: absolute !important; right: 0.625em; top: 0.625em; z-index: 4; } &.is-small:after { font-size: $size-small; } &.is-medium:after { font-size: $size-medium; } &.is-large:after { font-size: $size-large; } } } .newsletter-section { &.has-background { background-size: cover; background-repeat:no-repeat; background-position: center center; } .dark-overlay-true { position: static; } &.has-full-width-crop { @include respond-to('medium-up') { padding: 0; .column { margin: 0; width: 100%; } .newsletter__wrapper { max-width: 100%; } } } // Pop-up styles &.newsletter-section--popup { margin: 0; padding: 0; width: 100%; max-width: none; .newsletter__wrapper { max-width: 100%; padding: 2em 2em 0 2em; } } } .newsletter__image--mobile-wrapper { display: none; &.has-image-crop { padding-bottom: 100%; img { position: absolute; } } @include respond-to('medium-down') { display: block; overflow: hidden; position: relative; } } .newsletter-container { @include flexbox(); @include justify-content(center); @include flex-wrap(nowrap); @include align-self(normal); width: 100%; z-index: 3; position: relative; } .newsletter-form { &.is-responsive { @include flexbox(); @include flex-wrap(wrap); @include justify-content(center); } .field { @include justify-content(center); @include flex(1 0 100%); margin-bottom: 20px; &.is-stretched-width { @include flex(3 0 50%); min-width: 200px; max-width: 100%; } &.is-default-width { @include flex(1 0 auto); min-width: 150px; } &.is-default-width .button { width: 100%; } &.is-full-width { @include flex-basis(100%); } label { text-align: left; } .control { width: calc(100% - 12px); @include respond-to('medium-down') { width: 100%; } } } } .newsletter__image { position: relative; img { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; @include respond-to('medium-down') { position: static; } } &.image-crop--none img { @include object-fit(contain, center); } @include respond-to('medium-down') { display: none; } } .is-active-image { @include respond-to('medium-up') { @include flexbox(); @include flex-direction(column); @include justify-content(center); } } .newsletter__wrapper { padding: 40px; max-width: 55%; @include respond-to('small-down') { max-width: 100%; } } .newsletter__text-wrapper { width: calc(100% - 12px); } .newsletter__subheading { margin-bottom: 20px; } .contact-form__form-errors { .form__error { margin-bottom: 15px; background: $yellow; strong { font-weight: 400; } } } .button, .input, .textarea, .select select { @include respond-to('small-down') { font-size: 16px !important; //overwrites to prevent default iOS zooming } } /* #Message ================================================== */ $message-radius: $radius !default; $message-header-padding: 0.75em 1em !default; $message-header-radius: 0 !default; $message-body-border-color: $border !default; $message-body-border-width: 0 0 0 4px !default; $message-body-padding: 1.25em 1.5em !default; $message-body-radius: $radius !default; $message-body-pre-background-color: $white !default; $message-body-pre-code-background-color: transparent !default; $message-header-body-border-width: 0 !default; .message { font-size: $size-normal; strong { color: currentColor; } a:not(.button):not(.tag):not(.dropdown-item) { color: currentColor; text-decoration: underline; } // Sizes &.is-small { font-size: $size-small; } &.is-medium { font-size: $size-medium; } &.is-large { font-size: $size-large; } } .message-header { @include align-items(center); @include flexbox(); @include justify-content(space-between); line-height: 1.25; padding: $message-header-padding; position: relative; .delete { @include flex-grow(0); @include flex-shrink(0); margin-left: 0.75em; } & + .message-body { border-width: $message-header-body-border-width; border-top-left-radius: 0; border-top-right-radius: 0; } } .message-body { border-radius: $message-body-radius; border-style: solid; border-width: $message-body-border-width; padding: $message-body-padding; code, pre { background-color: $message-body-pre-background-color; } pre code { background-color: $message-body-pre-code-background-color; } } /* # Navbar ================================================== */ $navbar-background-color: $white !default; $navbar-box-shadow-size: 0 2px 0 0 !default; $navbar-box-shadow-color: $background !default; $navbar-height: 3.25rem !default; $navbar-padding-vertical: 1rem !default; $navbar-padding-horizontal: 2rem !default; $navbar-z: 30 !default; $navbar-fixed-z: 70 !default; $navbar-item-color: inherit !default; $navbar-item-hover-background-color: transparent !default; $navbar-item-active-background-color: transparent !default; $navbar-item-img-max-height: 1.75rem !default; $navbar-burger-color: $navbar-item-color !default; $navbar-tab-hover-background-color: transparent !default; $navbar-tab-hover-border-bottom-color: $link !default; $navbar-tab-active-color: $link !default; $navbar-tab-active-background-color: transparent !default; $navbar-tab-active-border-bottom-color: $link !default; $navbar-tab-active-border-bottom-style: solid !default; $navbar-tab-active-border-bottom-width: 3px !default; $navbar-dropdown-background-color: !default; $navbar-dropdown-background-opacity: 0.0 !default; $navbar-dropdown-border-top: 2px solid $border !default; $navbar-dropdown-offset: -4px !default; $navbar-dropdown-arrow: $link !default; $navbar-dropdown-radius: $radius-large !default; $navbar-dropdown-z: 20 !default; $navbar-dropdown-boxed-radius: $radius-large !default; $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default; $drop-down-menu-heading-font-size: px !default; $drop-down-menu-font-size: px !default; $drop-down-menu-font-style: !default; $drop-down-menu-letter-spacing: px !default; $navbar-divider-background-color: $background !default; $navbar-divider-height: 2px !default; $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default; $header-height: var(--header-height); @mixin fixed { left: 0; position: fixed; right: 0; z-index: $navbar-fixed-z; } .navbar { min-height: $navbar-height; position: relative; & > .container { @include align-items(stretch); @include flexbox(); min-height: $navbar-height; width: 100%; } &.has-shadow { box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color; } &.is-transparent { background-color: transparent; } } .is-fixed-bottom, .is-fixed-top { @include fixed; } .is-fixed-bottom { bottom: 0; &.has-shadow { box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color; } } .is-fixed-top { top: 0; } html, body { &.has-fixed-bottom { padding-bottom: $header-height; } } .fixed-message__text { padding-left: 0.75rem; padding-right: 0.75rem; @include respond-to('medium-down') { width: 100%; } } .fixed-message__button { @include respond-to('medium-down') { padding-bottom: 20px; width: 100%; } .button { min-height: 2.25em; height: auto; } } .navbar-brand, .navbar-tabs { @include align-items(stretch); @include flexbox(); @include flex-shrink(0); min-height: $navbar-height; } .navbar-tabs { @include overflow-touch; max-width: 100vw; overflow-x: auto; overflow-y: hidden; } .navbar-burger { color: $navbar-burger-color; @include hamburger($navbar-height); margin-left: auto; } .navbar-menu { display: none; } .navbar-item { display: block; line-height: 1.5; padding: 0; position: relative; } .navbar-link { display: block; line-height: 1.5; padding: 1rem 0.75rem; position: relative; } a.navbar-item, .navbar-link { cursor: pointer; } .navbar-item { display: block; @include flex-grow(0); @include flex-shrink(0); img { max-height: $navbar-item-img-max-height; } &.is-expanded { @include flex-grow(1); @include flex-shrink(1); } &.is-tab { border-bottom: 1px solid transparent; min-height: $navbar-height; padding-bottom: calc(0.5rem - 1px); &:hover { border-bottom-color: $navbar-tab-hover-border-bottom-color; } &.is-active { border-bottom-color: $navbar-tab-active-border-bottom-color; border-bottom-style: $navbar-tab-active-border-bottom-style; border-bottom-width: $navbar-tab-active-border-bottom-width; padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}); } } } .navbar-content { @include flex-grow(1); @include flex-shrink(1); } .navbar-link:not(.is-arrowless) { padding-right: 2.5em; &::after { @extend %arrow; right: 1em; } } .navbar-dropdown { padding-bottom: 1rem; padding-top: 1rem; .navbar-link, .navbar-item { color: $drop-down-menu-active-color; font-size: $drop-down-menu-font-size; text-transform: $drop-down-menu-font-style; padding-left: 0.5rem; padding-right: 0.5rem; &:hover { color: $drop-down-menu-hover-color; } } .navbar-link { padding-top: 0; } } .navbar-divider { background-color: $navbar-divider-background-color; border: none; display: none; height: $navbar-divider-height; margin: 0.5rem 0; } @include respond-to('medium-down') { .navbar > .container { display: block; } .navbar-brand, .navbar-tabs { .navbar-item { @include align-items(center); @include flexbox(); } } .navbar-link { &::after { display: none; } } .navbar-menu { background-color: $navbar-background-color; box-shadow: 0 8px 16px rgba($black, 0.1); padding: 0.5rem 0; } // Fixed navbar .navbar { &.is-fixed-bottom-touch, &.is-fixed-top-touch { @include fixed; } &.is-fixed-bottom-touch { bottom: 0; &.has-shadow { box-shadow: 0 -2px 3px rgba($black, 0.1); } } &.is-fixed-top-touch { top: 0; } &.is-fixed-top, &.is-fixed-top-touch { .navbar-menu { @include overflow-touch; max-height: calc(100vh - #{$navbar-height}); overflow: auto; } } } html, body { &.has-navbar-fixed-top-touch { padding-top: $navbar-height; } &.has-navbar-fixed-bottom-touch { padding-bottom: $navbar-height; } } } @include respond-to('medium-up') { .navbar, .navbar-menu, .navbar-start, .navbar-end { @include align-items(stretch); @include flexbox(); } .navbar { min-height: $navbar-height; &.is-spaced { padding: $navbar-padding-vertical $navbar-padding-horizontal; .navbar-start, .navbar-end { @include align-items(center); } a.navbar-item, .navbar-link { border-radius: $radius; } } &.is-transparent { a.navbar-item, .navbar-link { &:hover, &.is-active { background-color: transparent !important; } } .navbar-item.has-dropdown { &.is-active, &.is-hoverable:hover { .navbar-link { background-color: transparent !important; } } } } } .navbar-burger { display: none; } .navbar-item, .navbar-link { @include align-items(center); @include flexbox(); } .navbar-item { @include flexbox(); &.has-dropdown, &.has-mega-menu { @include align-items(stretch); &:hover { .navbar-dropdown { visibility: visible; opacity: 1; display: block; } } // Caret size a { &:after { font-size: $nav-font-size; } } } &.has-dropdown-up { .navbar-link::after { transform: rotate(135deg) translate(0.25em, -0.25em); } .navbar-dropdown { border-top: none; bottom: 100%; box-shadow: 0 -8px 8px rgba($black, 0.1); top: auto; } } &.is-active:hover, &.is-hoverable:hover { .navbar-dropdown { .navbar.is-spaced, &.is-boxed { opacity: 1; pointer-events: auto; transform: translateY(0); } } } } .has-submenu input:checked ~ .navbar-submenu { display: block; } .has-submenu label .navbar-link::after { top: 37%; } .has-submenu input:checked + label .navbar-link::after { transform: translateY(-60%) rotate(180deg); } .dropdown-style-horizontal .navbar-item { &.is-active, &.is-hoverable:hover .navbar-dropdown .section { @include flexbox(); @include flex-wrap(wrap); } } .navbar-menu { @include flex-grow(1); @include flex-shrink(0); } .navbar-start { @include justify-content(flex-start); margin-right: auto; } .navbar-end { @include justify-content(flex-end); margin-left: auto; } // Dropdown .navbar-dropdown { font-size: $drop-down-menu-font-size; letter-spacing: $drop-down-menu-letter-spacing; text-transform: $drop-down-menu-font-style; background-color: rgba($navbar-dropdown-background-color, $navbar-dropdown-background-opacity); box-shadow: 0 8px 8px rgba($black, 0.1); display: none; left: 0; position: absolute; top: 100%; z-index: $navbar-dropdown-z; opacity: 0; transition: visibility 0s, opacity 0.5s linear; &.navbar-dropdown--below-parent { top: 90%; } &.is-right { left: auto; right: 0; } &.is-vertical { padding: 1rem 0.8em; max-width: 300px; min-width: 200px; } &.is-horizontal { padding: 1.2em 0; width: 100%; } .navbar-link span { max-width: 80%; } } .navbar-link::after { transition: transform 0.2s linear; } .has-dropdown:hover, .has-mega-menu:hover { > .header__link, > .header__link > a { color: $header-link-hover; } > .navbar-link::after { transform: translateY(-60%) rotate(180deg); } } // Dropdown submenu .horizontal-dropdown__column .navbar-submenu { margin-bottom: 0; } .navbar-submenu { display: none; margin-left: 20px; margin-top: 0; margin-bottom: 10px; border-left: 2px solid rgba($drop-down-menu-active-color, 0.3); li:first-child .navbar-item { padding-top: 0; } li:last-child .navbar-item { padding-bottom: 0; } .navbar-item, .navbar-link { white-space: normal; padding: 10px 15px; } } // Dropdown vertical spacing .has-small-vertical-spacing { .menu__heading { padding-bottom: 5px; } .navbar-item { padding-top: 0; padding-bottom: 5px; } .navbar-link { padding-bottom: 5px; } > .navbar-item:last-child { padding-bottom: 0; } } .has-medium-vertical-spacing { .menu__heading { padding-bottom: 10px; } .navbar-item { padding-top: 0; padding-bottom: 10px; } .navbar-link { padding-bottom: 10px; } > .navbar-item:last-child { padding-bottom: 0; } } .has-large-vertical-spacing { .menu__heading { padding-bottom: 15px; } .navbar-item { padding-top: 0; padding-bottom: 15px; } .navbar-link { padding-bottom: 15px; } > .navbar-item:last-child { padding-bottom: 0; } } .navbar-divider { display: block; } .navbar > .container, .container > .navbar { .navbar-brand { margin-left: -0.75rem; } .navbar-menu { margin-right: -0.75rem; } } // Fixed navbar .navbar { &.is-fixed-bottom-desktop, &.is-fixed-top-desktop { @include fixed; } &.is-fixed-bottom-desktop { bottom: 0; &.has-shadow { box-shadow: 0 -2px 3px rgba($black, 0.1); } } &.is-fixed-top-desktop { top: 0; } } html, body { &.has-navbar-fixed-top-desktop { padding-top: $navbar-height; } &.has-navbar-fixed-bottom-desktop { padding-bottom: $navbar-height; } &.has-spaced-navbar-fixed-top { padding-top: $navbar-height + $navbar-padding-vertical * 2; } &.has-spaced-navbar-fixed-bottom { padding-bottom: $navbar-height + $navbar-padding-vertical * 2; } } .navbar-item.has-dropdown { &:hover, &.is-active { .navbar-link { background-color: $navbar-item-hover-background-color; } } } } // Remove box shadow on drop-downs .box-shadow-false { .navbar-dropdown, .mega-menu { box-shadow: none; } } /* # Pagination ================================================== */ $pagination-color: $grey-darker !default; $pagination-border-color: $grey-lighter !default; $pagination-margin: -0.25rem !default; $pagination-min-width: $control-height !default; $pagination-hover-color: $link-hover !default; $pagination-hover-border-color: $link-hover-border !default; $pagination-focus-color: $link-focus !default; $pagination-focus-border-color: $link-focus-border !default; $pagination-active-color: $link-active !default; $pagination-active-border-color: $link-active-border !default; $pagination-disabled-color: $grey !default; $pagination-disabled-background-color: $grey-lighter !default; $pagination-disabled-border-color: $grey-lighter !default; $pagination-current-color: $link-invert !default; $pagination-current-background-color: $link !default; $pagination-current-border-color: $link !default; $pagination-ellipsis-color: $grey-light !default; $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2); .paginate { display: inline-block; @include respond-to('medium-down') { width: 100%; margin-bottom: $gutter; } } .pagination { font-size: $size-normal; margin: $pagination-margin; .pagination-previous { margin-right: 16px; } .pagination-next { margin-left: 16px; } // Sizes &.is-small { font-size: $size-small; } &.is-medium { font-size: $size-medium; } &.is-large { font-size: $size-large; } &.is-rounded { .pagination-previous, .pagination-next { padding-left: 1em; padding-right: 1em; border-radius: $radius-rounded; } .pagination-link { border-radius: $radius-rounded; } } } .pagination, .pagination-list { @include align-items(center); @include flexbox(); @include justify-content(center); text-align: center; } .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis { @extend %control; @extend %unselectable; font-size: 1em; padding-left: 0.5em; padding-right: 0.5em; @include justify-content(center); margin: 0.25rem; text-align: center; } .pagination-previous, .pagination-next, .pagination-link { border-color: ;; color: $text; min-width: $pagination-min-width; &:hover { border-color: $pagination-hover-border-color; color: $pagination-hover-color; } &:focus { border-color: $pagination-focus-border-color; } &:active { box-shadow: $pagination-shadow-inset; } &[disabled] { background-color: $pagination-disabled-background-color; border-color: $pagination-disabled-border-color; box-shadow: none; color: $pagination-disabled-color; opacity: 0.5; } } .pagination-previous, .pagination-next { padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; } .pagination-link { &.is-current { background-color: $pagination-current-background-color; border-color: $pagination-current-border-color; color: $pagination-current-color; } } .pagination-ellipsis { color: $pagination-ellipsis-color; pointer-events: none; } @include respond-to('medium-down') { .pagination { .pagination-previous, .pagination-next { width: calc(50% - 10px); margin-left: 5px; margin-right: 5px; } &.paginate--both { @include flex-wrap(wrap); .pagination-previous, .pagination-next { order: 2; } } } } @include respond-to('medium-up') { .pagination-list { @include flex-grow(1); @include flex-shrink(1); @include justify-content(flex-start); } .pagination { @include justify-content(space-between); &.is-center { .pagination-previous { order: 1; } .pagination-list { @include justify-content(center); order: 2; } .pagination-next { order: 3; } } &.is-right { .pagination-previous { order: 1; } .pagination-next { order: 2; } .pagination-list { @include justify-content(flex-end); order: 3; } } } } // Pagination types .pagination-button__infinite-scroll:not(.is-loading) { display: none; } /* # Tabs ================================================== */ $tabs-border-bottom-color: $border !default; $tabs-border-bottom-style: solid !default; $tabs-border-bottom-width: 1px !default; $tabs-link-color: $text !default; $tabs-link-hover-border-bottom-color: $text-strong !default; $tabs-link-hover-color: $text-strong !default; $tabs-link-active-border-bottom-color: $link !default; $tabs-link-active-color: $link !default; $tabs-link-padding: 0.5em 1em !default; $tabs-boxed-link-radius: $radius !default; $tabs-boxed-link-hover-background-color: $background !default; $tabs-boxed-link-hover-border-bottom-color: $border !default; $tabs-boxed-link-active-background-color: $white !default; $tabs-boxed-link-active-border-color: $border !default; $tabs-boxed-link-active-border-bottom-color: transparent !default; $tabs-toggle-link-border-color: $border !default; $tabs-toggle-link-border-style: solid !default; $tabs-toggle-link-border-width: 1px !default; $tabs-toggle-link-hover-background-color: $background !default; $tabs-toggle-link-hover-border-color: $border-hover !default; $tabs-toggle-link-radius: $radius !default; $tabs-toggle-link-active-background-color: $link !default; $tabs-toggle-link-active-border-color: $link !default; $tabs-toggle-link-active-color: $link-invert !default; .tabs { @extend %block; @include overflow-touch; @extend %unselectable; @include align-items(stretch); @include flexbox(); @include justify-content(flex-start); a { @include align-items(center); border-bottom-color: $tabs-border-bottom-color; border-bottom-style: $tabs-border-bottom-style; border-bottom-width: $tabs-border-bottom-width; color: $tabs-link-color; @include flexbox(); @include justify-content(center); margin-bottom: -#{$tabs-border-bottom-width}; padding: $tabs-link-padding; vertical-align: top; &:hover { border-bottom-color: $tabs-link-hover-border-bottom-color; color: $tabs-link-hover-color; * { color: $tabs-link-hover-color; // Used to ensure headings get proper color set } } } li { display: block; margin-top: 0.25em; &.active, &.is-active { a { border-bottom-color: $tabs-link-active-border-bottom-color; color: $tabs-link-active-color; * { color: $tabs-link-hover-color; // Used to ensure headings get proper color set } } } // Used to ensure tab title content is same size/color a *{ margin-bottom: 0; font-size: 1rem; } } ul { @include align-items(center); border-bottom-color: $tabs-border-bottom-color; border-bottom-style: $tabs-border-bottom-style; border-bottom-width: $tabs-border-bottom-width; @include flexbox(); @include flex-grow(1); @include flex-shrink(0); @include justify-content(flex-start); margin-left: 0; &.is-left { padding-right: 0.75em; } &.is-center { flex: none; @include justify-content(center); padding-left: 0.75em; padding-right: 0.75em; } &.is-right { @include justify-content(flex-end); padding-left: 0.75em; } } .icon { &:first-child { margin-right: 0.5em; } &:last-child { margin-left: 0.5em; } } // Alignment &.is-center { ul { @include justify-content(center); } } &.is-right { ul { @include justify-content(flex-end); } } // Sizes &.is-small { font-size: $size-small; } &.is-medium { font-size: $size-medium; } &.is-large { font-size: $size-large; } } .tabs-content { padding-left: 0; margin-left: 0; list-style: none; width: 100%; > li { display: none; width: 100%; &.is-active, &.active { display: block; } } } // Backwards compatibility with tab code generated by the Content Creator Chrome extension ul.tabs { @extend %block; @include overflow-touch; @extend %unselectable; @include flexbox(); @include flex-grow(1); @include flex-shrink(0); @include justify-content(flex-start); @include align-items(stretch); border-bottom-color: $tabs-border-bottom-color; border-bottom-style: $tabs-border-bottom-style; border-bottom-width: $tabs-border-bottom-width; padding-left: 0; margin-left: 0; a { @include align-items(center); border-bottom-color: $tabs-border-bottom-color; border-bottom-style: $tabs-border-bottom-style; border-bottom-width: $tabs-border-bottom-width; color: $tabs-link-color; @include flexbox(); @include justify-content(center); margin-bottom: -#{$tabs-border-bottom-width}; padding: $tabs-link-padding; vertical-align: top; &:hover { border-bottom-color: $tabs-link-hover-border-bottom-color; color: $tabs-link-hover-color; } } li { display: block; margin-top: 0.25em; &.active, &.is-active { a { border-bottom-color: $tabs-link-active-border-bottom-color; color: $tabs-link-active-color; } } a.active, a.is-active { border-bottom-color: $tabs-link-active-border-bottom-color; color: $tabs-link-active-color; * { color: $tabs-link-active-color;// Used to ensure headings get proper color set } } } } ul.tabs-content { margin-left: 0; } // Styles ul.tabs { &.is-fullwidth { li { @include flex-grow(1); @include flex-shrink(0); } } &.is-toggle { a { border-color: $tabs-toggle-link-border-color; border-style: $tabs-toggle-link-border-style; border-width: $tabs-toggle-link-border-width; margin-bottom: 0; position: relative; &:hover { background-color: $tabs-toggle-link-hover-background-color; border-color: $tabs-toggle-link-hover-border-color; z-index: 2; } } li { & + li { margin-left: -#{$tabs-toggle-link-border-width}; } &:first-child a { border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius; } &:last-child a { border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0; } &.is-active { a { background-color: $tabs-toggle-link-active-background-color; border-color: $tabs-toggle-link-active-border-color; color: $tabs-toggle-link-active-color; z-index: 1; } } } ul { border-bottom: none; } &.is-toggle-rounded { li { &:first-child a { border-bottom-left-radius: $radius-rounded; border-top-left-radius: $radius-rounded; padding-left: 1.25em; } &:last-child a { border-bottom-right-radius: $radius-rounded; border-top-right-radius: $radius-rounded; padding-right: 1.25em; } } } } } /* # Product ================================================== */ //Reviews .shopify-product-reviews-badge { height: 30px; display: block; } .reviews-visibility-false { display: none; } // Product gallery .product__images { @include respond-to('medium-down') { margin-bottom: 40px; } } .product-gallery__main, .product-gallery__thumbnails.is-slide-nav--true { opacity: 0; transition: ease-in-out 0.2s opacity; &.flickity-enabled, &.vertical-slider-enabled { opacity: 1; } } .product-gallery__image { width: 100%; height: auto; img { width: 100%; height: auto; display: block; } } .product-gallery__link { display: block; } .zoom-container { width: 100%; display: block; } // Product gallery thumbnails .product-gallery__nav .gallery-cell, .is-slide-nav--true .product-gallery__thumbnail { opacity: 0.3; &.is-nav-selected { opacity: 1; } } .product-thumbnail { padding-top: 10px; line-height: 1.2; } .product-thumbnail__vendor, .product-thumbnail__price { display: block; } .thumbnail__caption { padding: 0 3px; } .thumbnail-swatch { @include flexbox(); padding: 3px 3px 0; &.is-justify-left { margin-left: -5px; } &.is-justify-right { margin-right: -5px; } .swatch { @include flexbox(); box-sizing: border-box; border: 1px solid transparent; padding: 2px; margin: 0 3px; &:hover { border: 1px solid #000; } } .swatch__style--circle, .swatch__style--circle span, .swatch__style--circle img { border-radius: 50% } span { border: 1px solid ; min-height: 20px; min-width: 20px; display: inline-block; img { max-width: 20px; max-height: 20px; display: block; } .swatch__image--empty { display: none; } } } // Bottom slider .product-gallery__thumbnails--bottom-slider { margin-top: 20px; @include flexbox(); @include justify-content(center); .flickity-button:disabled { display: none; } .product-gallery__thumbnail { margin-right: 20px; width: 20%; text-align: center; } } // Bottom grid .product-gallery__thumbnails--bottom-thumbnails { margin-top: 20px; @include flexbox(); @include justify-content(center); &.is-slide-nav--false .product-gallery__thumbnail { margin-bottom: 20px; line-height: 0; } } // Right .product-gallery--right-thumbnails:not(.product-gallery--image-amount-1) { @include flexbox(); .product-gallery__main { width: 85%; height: 100%; } .product-gallery__thumbnails { width: 15%; margin-left: 20px; } .product-gallery__thumbnail { width: 100%; margin-bottom: 20px; &:last-child { margin-bottom: 0; } } } // Left .product-gallery--left-thumbnails:not(.product-gallery--image-amount-1) { @include flexbox(); .product-gallery__main { width: 85%; height: 100%; @include order(2); } .product-gallery__thumbnails { width: 15%; margin-right: 20px; @include order(1); } .product-gallery__thumbnail { width: 100%; margin-bottom: 20px; &:last-child { margin-bottom: 0; } } } //Vertical slider .product-gallery__thumbnails--right-thumbnails, .product-gallery__thumbnails--left-thumbnails { width: 100%; margin: 10px; @include align-self(flex-start); &.is-slide-nav--true { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ &::-webkit-scrollbar { /* WebKit */ width: 0; height: 0; } } .product-gallery__thumbnail { width: 100%; margin: 0; &:last-child { margin-bottom: 0; } &:before { line-height: 0; color: transparent; display: block; text-align: center; content: counter(carousel-cell); } } } .product__collections-list, .product__type-list, .product__tags-list { padding-bottom: 5px; &.tags { margin-bottom: 0; .tag { margin-bottom: 1rem; } } .product__classification-title { margin-right: 0.5rem; margin-bottom: 1rem; } } // Product price .savings { display: block; } .sold-out { color: ; } /* # Product - image scroll ================================================== */ .product-template--image-scroll { .product-gallery__main { opacity: 1; &:after { content: 'flickity'; display: none; } @include respond-to('medium-up') { &:after { content: ''; } } } .product-gallery__image { margin-bottom: 20px; opacity: 1 !important; //override flickity fix } .product-gallery__thumbnails { @include respond-to('medium-up') { display: none; } } } /* # Product - Gallery ================================================== */ .product-gallery { &:hover .flickity-prev-next-button { opacity: 1; @include respond-to('medium-down') { display: none; } } .flickity-prev-next-button { opacity: 0; transition: all 0.3s ease-in-out; } .flickity-page-dots { display: none; } } // No Thumbnails .product-gallery--no-thumbnails { .flickity-page-dots { @include respond-to('medium-down') { display: block; } } } .product-gallery__nav { .gallery-cell { width: calc(20% - 10px); margin: 0 5px; } } /* # Product - featured slideshow ================================================== */ .product-template--featured-slideshow { .product-gallery__main { height: 90vh; } .product-gallery__link, .image__container { height: 100%; } .product-gallery__image.is-selected { img { height: 100%; opacity: 1; } } .product-gallery__image { margin: 0 20px; width: 50%; height: 100%; img { transition: height 0.2s linear; opacity: 0.8; height: 50%; width: 100%; @include object-fit(contain); } .image__container { @include flexbox(); @include align-items(center); } } .product__information { &.one-column-layout { max-width: calc(0.75 * #{$site-max-width}); margin: 0 auto; } .description { &.bottom { padding-top: $gutter; } } } } //Fix for fade flicker .product-gallery__main.is-fade { .flickity-slider .product-gallery__image { opacity: 0 !important; transition: opacity 1s ease !important; &.is-selected { opacity: 1 !important; } } } /* # Product - blocks ================================================== */ .block__related-products { width: 100%; } .block__product-reviews { min-width: 50%; } .dynamic-blocks--has-limit { .section { width: 100%; } .section.has-background { width: calc(100% - 20px); } } .section.product-info__block, .section.product-gallery__block { @include flexbox(); @include align-items(flex-start); } .block__product-gallery .product-gallery__container { width: 100%; } .product_section .has-product-sticker .sticker-holder__content { font-size: 16px; } /* # Related products ================================================== */ .related-products { .products-slider .gallery-cell { padding: 0 10px; @include respond-to('medium-down') { width: calc(50% - 20px); } } } // Avoids glitch when replacing section with block .recommended-products-section { visibility: hidden !important; } /* # Product form ================================================== */ $atc-button-height: 60px; $atc-button-width: 100%; $atc-button-margin: 0 0 0 0; $atc-button-spb-margin: 12px 0 0 0; $input-border-width: thin !default; $input-border-color: ; $input-border-radius: px; $quantity-background-color: !default; $quantity-background-color-disabled: !default; $quantity-background-hover-color: !default; $quantity-box-stacked-control-width: 48px; $quantity-box-control-width: 44px; // Size chart .product__size-chart { float: right; } // Notify form .product__notify-form { margin-bottom: 1.5rem; max-width: 350px; // specific size to keep the BIS form consistent no matter the size of the product description } .notify-form__success-message { margin: 0; } // Multiple options .selector-wrapper { margin-bottom: 10px; @include flexbox(); @include align-items(center); &:last-of-type { margin-bottom: 1.5rem; } label { margin-right: 10px; margin-bottom: 0; &:not(:last-child) { margin-bottom: 0; } } } .product_form--swatches { .select-container { display: none; } } // Inventory .items_left { margin-bottom: 1.5rem; } // Quantity box .quantity-wrapper { .quantity-element { min-height: $atc-button-height; } .quantity-input { text-align: center; width: 100%; } .quantity-plus, .quantity-minus { .icon { padding: 0.3em; } } } .cart-warning { margin-top: 20px; } // Smart payment button .add_to_cart.action_button { margin-bottom: 0; } .shopify-payment-button { position: relative; } .shopify-payment-button button { line-height: 1.2; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0; } div.shopify-payment-button__button { border-radius: 0; } .shopify-payment-button__button--branded, .shopify-payment-button__button--unbranded { overflow: hidden; min-height: $atc-button-height; } button.shopify-payment-button__more-options { color: ; box-shadow: none; text-transform: none; font-size: 0.8rem; letter-spacing: 0; padding: 16px 0 28px; max-width: 80%; margin: 0 auto; font-weight: normal; font-family: , ; font-style: ; &:hover { background-color: transparent; border: none; } } .purchase-details { @include flexbox; @include align-items(center); @include flex-wrap(wrap); } .product_section .smart-payment-button--true.product_form { max-width: 100%; } .product-quantity-box.purchase-details__quantity { margin-top: 12px; } .smart-payment-button--true { .purchase-details { @include respond-to('medium-down') { padding-bottom: 10px; } } .product-quantity-box.purchase-details__quantity { @include respond-to('medium-down') { width: 100%; margin-right: 0; .input.quantity { width: calc(100% - 88px); } } } } .smart-payment-button--false .purchase-details { @include align-items(flex-start); } // Quantity boxes .quantity-input.input { -moz-appearance: textfield; box-shadow: none; border: 0; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } } .quantity-plus.button, .quantity-minus.button { background-color: $quantity-background-color; &:hover { background-color: $quantity-background-hover-color; .icon { fill: ; } } .icon { fill: ; } } .quantity-plus.button[disabled], .quantity-minus.button[disabled] { opacity: 1; background-color: $quantity-background-color-disabled; } // Used to remove width shifting on hover .quantity-wrapper.field.has-addons .control:not(:last-child) { margin-right: 0; } .quantity-wrapper.quantity-style--box { border-radius: $input-border-radius; .quantity-minus { width: $quantity-box-control-width; border-top-left-radius: $input-border-radius; border-bottom-left-radius: $input-border-radius; } .minus-control { border-top-left-radius: $input-border-radius; border-bottom-left-radius: $input-border-radius; } .quantity-plus { width: $quantity-box-control-width; border-top-right-radius: $input-border-radius; border-bottom-right-radius: $input-border-radius; } .plus-control { border-top-right-radius: $input-border-radius; border-bottom-right-radius: $input-border-radius; } .quantity-input-control { width: auto; input { border-top: $input-border-width solid $input-border-color; border-bottom: $input-border-width solid $input-border-color; } } .quantity-input-control--fill { width: 100%; } .quantity-input { width: 100%; } &.is-medium { .quantity-element { min-height: auto; min-width: 38px; height: 38px; } .quantity-plus, .quantity-minus { width: 38px; } } } .quantity-wrapper.quantity-style--stacked { position: relative; border-radius: $input-border-radius !important; //Used to overwrite default styling .quantity-input-control { width: calc(100% - #{$quantity-box-stacked-control-width}); } .minus-control { position: absolute; height: calc(#{$atc-button-height} / 2); bottom: 0; right: 0; z-index: 3; margin-right: 0; width: $quantity-box-stacked-control-width; } .plus-control { position: absolute; min-height: calc(#{$atc-button-height} / 2); top: 0; right: 0; z-index: 3; width: $quantity-box-stacked-control-width; } .quantity-input { border-left: $input-border-width solid $input-border-color; border-top: $input-border-width solid $input-border-color; border-bottom: $input-border-width solid $input-border-color; border-top-left-radius: $input-border-radius !important; //Used to overwrite default styling border-bottom-left-radius: $input-border-radius !important; //Used to overwrite default styling text-align: center; width: 100%; } .quantity-minus { height: calc(#{$atc-button-height} / 2); min-height: calc(#{$atc-button-height} / 2); width: $quantity-box-stacked-control-width; border-radius: 0; border-left: 0; border-bottom: $input-border-width solid $input-border-color; border-right: $input-border-width solid $input-border-color; border-bottom-right-radius: $input-border-radius !important; //Used to overwrite default styling margin-right: 1px; z-index: 4; opacity: 1.0 !important; // Overwrites disabled button styling } .quantity-plus { height: calc(#{$atc-button-height} / 2); min-height: calc(#{$atc-button-height} / 2); width: $quantity-box-stacked-control-width; border: 0; border-left: 0; border-top: $input-border-width solid $input-border-color; border-right: $input-border-width solid $input-border-color; border-top-right-radius: $input-border-radius; border-bottom-right-radius: 0; z-index: 4; } } .product-quantity-box.purchase-details__quantity { margin-right: 10px; width: calc(50% - 12px); @include respond-to('small-down') { width: 100%; margin-right: 0; } input.quantity { padding-top: 11px; padding-bottom: 11px; line-height: 1.4; margin-bottom: 0; width: calc(100% - 88px); min-height: $atc-button-height; } } .smart-payment-button--true .product-quantity-box.purchase-details__quantity { @include respond-to('medium-down') { width: 100%; margin-right: 0; .input.quantity { width: calc(100% - 88px); } } } .purchase-details__buttons { @include flexbox; @include flex(1 0 calc(50% - 12px)); @include align-items(flex-end); @include flex-wrap(wrap); margin-left: 6px; @include respond-to('medium-down') { margin-top: 20px; margin-left: 12px; @include flex(1 0 calc(50% - 12px)); } @include respond-to('small-down') { margin-top: 12px; margin-left: 0; @include flex(1 0 100%); } .button { width: 100%; height: auto; @include align-items(center); min-height: $atc-button-height; } .shopify-payment-button { @include flex(1 0 100%); margin-bottom: 0; max-width: 100%; @include respond-to('widescreen-up') { @include flex(1 0 calc(50% - 12px)); max-width: calc(50% - 12px); } } .action_button.action_button--secondary { background-color: transparent; border: 1px solid $border; color: $text; box-shadow: none; line-height: 1.2; padding: 10px 0; @include flex(1 0 100%); margin: 0; max-width: 100%; @include respond-to('widescreen-up'){ @include flex(1 0 calc(50% - 12px)); max-width: calc(50% - 12px); margin-right: 8px; } @include respond-to('medium-down') { margin-bottom: 12px; } &:hover, &:focus { border: 1px solid $btn-add-to-cart-bg-color; background-color: $btn-add-to-cart-bg-color; color: $btn-add-to-cart-text-color; } } } .purchase-details { .purchase-details__spb--true { @include flex(1 0 100%); @include align-items(flex-start); margin-top: 12px; margin-left: 0; // Used to overwrite styling issues on IE11 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { width: 100%; } @include respond-to('medium-down') { margin-left: 0; margin-bottom: 0; } .action_button.action_button--secondary { @include flex(1 0 #{$atc-button-width}); margin: $atc-button-margin; max-width: calc(#{$atc-button-width}); // Used to overwrite styling issues on IE11 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { width: 100% !important; max-width: #{$atc-button-width} !important; } @include respond-to('medium-down') { @include flex(1 0 100%); margin-right: 0px; margin-top: 0; margin-bottom: 12px; max-width: 100%; } } .shopify-payment-button { margin: $atc-button-spb-margin; max-width: calc(#{$atc-button-width}); // Used to overwrite styling issues on IE11 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { width: 100% !important; max-width: #{$atc-button-width} !important; } @include respond-to('medium-down') { margin-left: 0; margin-top: 0; margin-bottom: 10px; max-width: 100%; } .shopify-payment-button__button--unbranded { @include btn-add-to-cart; font-family: $button-font, $button-font-fallback; font-weight: $button-font-weight; font-style: $button-font-style; letter-spacing: $button-letter-spacing; text-transform: $button-font-capitalization; border: 1px solid $btn-add-to-cart-border-color; } .shopify-paymeny-button__button--branded { border-radius: $btn-add-to-cart-border-radius; } } } .purchase-details__spb--false { height: $atc-button-height; margin: 12px 0 0; display: inline-block; @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { width: 100%; } .button--add-to-cart { height: inherit; width: 50%; @include respond-to('medium-down') { width: 100%; } } } &.has-quantity-box .purchase-details__spb--false { max-width: 50%; @include respond-to('medium-down') { max-width: 100%; } .button--add-to-cart { width: 100%; } } } /* Animation for checkmark on add to cart button */ .button--add-to-cart { position: relative; .text { display: block; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .fadeInDown.text { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; } .checkmark { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; path { stroke-dasharray: 19.79 19.79; stroke-dashoffset: 19.79; stroke: $btn-add-to-cart-text-color-highlight; opacity: 0; } &.checkmark-active path { -webkit-animation: drawCheckmark 0.5s linear alternate forwards; animation: drawCheckmark 0.5s linear alternate forwards; } } } @keyframes drawCheckmark { from { stroke-dashoffset: 19.79; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } } @-webkit-keyframes drawCheckmark { from { stroke-dashoffset: 19.79; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } } .ie button .checkmark { path { stroke-dashoffset: 0; opacity: 0; } &.checkmark-active path { -webkit-animation: fadeCheckmark 0.5s linear alternate forwards; animation: fadeCheckmark 0.5s linear alternate forwards; } } @-webkit-keyframes fadeCheckmark { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeCheckmark { from { opacity: 0; } to { opacity: 1; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { button .checkmark { path { stroke-dashoffset: 0; opacity: 0; } &.checkmark-active path { animation: fadeCheckmark 0.5s linear alternate forwards; } } @keyframes fadeCheckmark { from { opacity: 0; } to { opacity: 1; } } } /* # Product thumbnail ================================================== */ $product-hover-text: ; $product-hover-bg: ; .product-image__wrapper { position: relative; &:hover { .thumbnail-overlay__container { @include flexbox(); .quick-shop__buttons, .quick-shop__info { @include flexbox(); } @include respond-to('medium-down') { opacity: 0; visibility: hidden; } } } } .thumbnail-overlay__container { @include justify-content(center); @include align-items(center); @include flex-wrap(nowrap); @include flex-direction(column); display: none; position: absolute; padding: 20px; top: 0; left: 0; width: 100%; height: 100%; background-color: $product-hover-bg; color: $product-hover-text; z-index: 10; a, a:visited { color: $product-hover-text; } .spr-icon-star:before { color: $product-hover-text; } .product-thumbnail__title, .product-thumbnail__price { color: $product-hover-text; } .quick-shop__info, .quick-shop__buttons { @include flexbox(); @include justify-content(center); display: none; width: 100%; } .quick-shop__info { @include align-items(center); } .quick-shop__buttons { @include align-items(flex-start); padding-top: 20px; position: relative; } .animated { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .sold-out { color: $product-hover-text; } } .thumbnail__hover-overlay--true { .quick-shop__info { @include respond-to('medium-down') { display: none; } } .thumbnail__caption { display: none; @include respond-to('medium-down') { display: block; } } } .hidden-product-link { line-height: 0; font-size: 0; color: transparent; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 11; } .has-thumbnail-sticker { .image__container { position: relative; } .sticker-holder { @include flexbox(); height: 100%; position: absolute; width: 100%; z-index: 2; } .sticker-position-right { @include justify-content(flex-end); text-align: right; } .sticker-position-bottom-left { @include align-items(flex-end); } .sticker-position-bottom-right { @include justify-content(flex-end); @include align-items(flex-end); text-align: right; } .spr-badge { @include flexbox(); @include flex-direction(column); padding-top: 3px; padding-right: 3px; .spr-badge-starrating, .spr-badge-caption { text-align: $thumbnail-text-alignment; } } .thumbnail-overlay__container .spr-badge-starrating, .thumbnail-overlay__container .spr-badge-caption, { @include justify-content(center); text-align: center; } .spr-badge-starrating .spr-icon-star, .spr-badge-starrating .spr-icon-star-empty, .spr-badge-caption { font-size: 80%; } .spr-icon-star:before { color: #F8E71C; } .product-thumbnail__title, .product-thumbnail__price { display: block; padding-top: 3px; } .thumbnail-sticker:nth-child(1n+4) { display: none; } } .thumbnail-sticker { @include flexbox(); width: 100%; padding: 5px 10px; text-align: center; &.sale-sticker { @include sale-sticker; } &.new-sticker { @include new-sticker; } &.best-seller-sticker { @include bestseller-sticker; } &.coming-soon-sticker { @include comingsoon-sticker; } &.staff-pick-sticker { @include staffpick-sticker; } &.pre-order-sticker { @include preorder-sticker; } } // Banner text .sticker-text { font-size: 1em; @include respond-to('large-down') { font-size: 0.8em; } } // Square banners .sticker-holder.sticker-shape-square { @include flex-wrap(wrap); .sticker-text { width: 100%; } } .one-seventh .sticker-shape-square .sticker-holder__content, .one-sixth .sticker-shape-square .sticker-holder__content, .one-fifth .sticker-shape-square .sticker-holder__content, .sticker-shape-square .sticker-holder__content { max-width: 50%; font-size: 12px; @include respond-to('small-down') { max-width: 60%; } } .one-fourth .sticker-shape-square .sticker-holder__content { max-width: 40%; font-size: 14px; @include respond-to('small-down') { max-width: 60%; } } .one-third .sticker-shape-square .sticker-holder__content { max-width: 33.3334%; font-size: 14px; @include respond-to('small-down') { max-width: 60%; } } .one-half .sticker-shape-square .sticker-holder__content { max-width: 25%; font-size: 16px; @include respond-to('small-down') { max-width: 60%; } } // Round banners .sticker-shape-round.sticker-position-bottom-right .thumbnail-sticker, .sticker-shape-round.sticker-position-right .thumbnail-sticker { float: right; margin-right: 5px; margin-left: 0; } .sticker-shape-round .thumbnail-sticker { border-radius: 50%; display: inline-block; width: calc(33.3333% - 5px); padding: calc(33.3333% - 5px) 0 0; margin-left: 5px; margin-bottom: 5px; margin-top: 5px; position: relative; .sticker-text { position: absolute; top: 50%; left: 50%; line-height: 1.1; transform: translateX(-50%) translateY(-50%); word-wrap: break-word; font-size: 0.7em; @include respond-to('medium-down') { font-size: 1em; } } } .one-seventh .sticker-shape-round .sticker-holder__content, .one-sixth .sticker-shape-round .sticker-holder__content, .one-fifth .sticker-shape-round .sticker-holder__content, .sticker-shape-round .sticker-holder__content { width: 75%; font-size: 12px; @include respond-to('large-down') { width: 80%; } @include respond-to('small-down') { width: 100%; } } .one-fourth .sticker-shape-round .sticker-holder__content { width: 60%; font-size: 14px; @include respond-to('large-down') { width: 80%; } @include respond-to('small-down') { width: 100%; } } .one-third .sticker-shape-round .sticker-holder__content, .one-half .sticker-shape-round .sticker-holder__content { width: 50%; font-size: 18px; .thumbnail-sticker { margin: 5px; width: 100%; max-width: 60px; padding: 30px; } @include respond-to('large-down') { width: 80%; } @include respond-to('small-down') { width: 100%; } } .one-third .sticker-shape-round.sticker-position-bottom-right .thumbnail-sticker, .one-half .sticker-shape-round.sticker-position-bottom-right .thumbnail-sticker { margin-right: 10px; margin-left: 0; @include respond-to('medium-down') { font-size: 0.8em; } @include respond-to('medium-down') { font-size: 0.6em; } } .one-half .sticker-shape-round .sticker-holder__content { @include respond-to('large-down') { width: 65%; } } .small-down--one-whole .sticker-shape-round .thumbnail-sticker { @include respond-to('small-down') { font-size: 0.9em; width: calc(22% - 10px); padding: calc(22% - 10px) 0 0; } } // Product page banners .product_section .product__information .thumbnail-sticker:nth-child(1n+4) { display: none; } .has-product-sticker { .sticker-holder__content--product-center { @include flexbox(); @include justify-content(center); margin: 0px auto; max-width: 30%; padding-top: 20px; font-size: 16px; @include respond-to('medium-down') { font-size: 13px; } .thumbnail-sticker { margin: 0 5px; } } // Round banners .sticker-shape-round { .sticker-holder__content--product { @include flexbox(); @include flex-wrap(wrap); max-width: 45%; width: 100%; font-size: 14px; @include respond-to('medium-down') { max-width: 80%; } } .is-product-slideshow { max-width: 30%; } .sticker-holder__content--product-center { @include respond-to('medium-down') { max-width: 50%; } @include respond-to('small-down') { max-width: 80%; } } .thumbnail-sticker { width: calc(33.333% - 10px); padding: calc(33.3333% - 10px) 0 0; margin: 0 10px 0 0; display: inline-block; float: none; .sticker-text { font-size: 1em; } } } // Square banners .sticker-shape-square { .sticker-holder__content--product { @include flexbox(); max-width: 75%; width: 100%; @include respond-to('medium-down') { max-width: 100%; font-size: 13px; } } .is-product-slideshow { max-width: 45%; } .sticker-holder__content--product-center { @include respond-to('medium-down') { max-width: 100%; font-size: 13px; } } .thumbnail-sticker { width: calc(33.333% - 10px); margin-right: 10px; display: inline-block; float: none; .sticker-text { font-size: 1em; } } } .sticker-holder { display: block; padding-bottom: 20px; font-size: 14px; } } .swap--true { img { transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease; opacity: 1; visibility: visible; height: auto; } .swap--visible { opacity: 0; visibility: hidden; height: 0; } } /* # Quick shop ================================================== */ $quick-shop-popup-bg: ; .quick-shop__popup, .quickshop-forms__container { display: none; } .quick-shop { .product-gallery, .product-gallery__nav { opacity: 0; transition: opacity 0.5s ease; } &.quick-shop--loaded { .product-gallery, .product-gallery__nav { opacity: 1; } } } .quick-shop__buttons { z-index: 12; } // Popup elements .quickshop__gallery--right { @include flex-direction(row-reverse); } .quick-shop__popup { padding: 40px 10px; .fancybox-close-small svg { background-color: rgba(0,0,0,0.1); border-radius: 50%; } .modal_price { font-size: 1.2em; } .product_form { padding: 20px 0; } .purchase-details__buttons { @include respond-to('medium-down') { margin-top: 12px; } } .select, .select select { @include respond-to('medium-down') { width: auto; } } .select-container { clear: both; overflow: hidden; // Used to display dynamically generated selects properly } .select { display: block; float: left; clear: both; margin-bottom: 10px; } } .quick-shop__gallery { padding-right: 10px; } .quick-shop__text-wrap { padding-left: 10px; } // Quick shop product gallery .quick-shop .product-gallery__nav { margin-top: 20px; } .quick-shop .product-gallery .gallery-cell { width: 100%; } .quick-shop .product-gallery__nav .gallery-cell { width: calc(20% - 10px); } // Fancybox elements .quick-shop__lightbox .fancybox-content { width: 90%; max-width: 900px; background-color: $quick-shop-popup-bg; cursor: pointer !important; } // Quick shop sale banners .quick-shop__popup .sticker-shape-square .sticker-holder__content, .quick-shop__popup .sticker-shape-round .sticker-holder__content { max-width: 100%; font-size: 13px; } /* # Size chart ================================================== */ .size-chart { display: none; .fancybox-close-small svg { background-color: rgba(0,0,0,0.1); border-radius: 50%; } } .size-chart-wrap { @include flex(1 0 60%); padding: 0; max-width: 900px; position: relative; padding: 40px; &.animated { opacity: 0; } } .product__size-chart { font-size: 1rem; &.size-chart--medium-down { float: left; width: 100%; display: none; padding-bottom: 20px; @include respond-to('medium-down') { display: block; } } .icon { position: relative; top: 2px; width: 0.9rem; height: 0.9rem; } } /* #Swatch Styles ================================================== */ // Product page swatches /* # Announcement bar ================================================== */ .announcement-bar { width: 100%; position: absolute; // Sizes &.is-small { font-size: $size-small; } &.is-regular { font-size: $size-normal; } &.is-large { font-size: $size-large; @include respond-to('small-down') { font-size: $size-normal; } } .is-width-standard .message-header { padding-left: 0; padding-right: 0; } } .announcement-bar__text { @include flexbox(); @include align-items(center); } .announcement-bar__icon { line-height: 0; } .announcement-bar__content { @include flex(1 1 auto); @include flexbox(); @include align-items(center); p { padding: 0 0.5em; display: inline-block; } } .announcement-bar__shadow { opacity: 0; visibility: hidden; min-height: 20px; } .announcement-bar--visible { .announcement-container { transition: all 0s linear; height: auto; } } .announcement-container { height: 0; overflow: hidden; position: relative; } /* # Article (blog posts) ================================================== */ //author .author-share-wrap { .blog-share > div { @include respond-to('medium-up') { @include justify-content(flex-end); } } } .comment-section { display: block; } .blog-author { padding-left: 0; img { width: 100px; height: 100px; } p { font-size: 0.9rem; } } .comment-section--cards img { @include respond-to('medium-down') { width: 100px; } } /* # Banner ================================================== */ .banner__wrapper { overflow: hidden; position: relative; max-height: 100vh; img { @include object-fit(cover); height: 100%; } &.is-small { .image-element__wrap { height: 30vh; @include respond-to('medium-down') { height: auto; } } } &.is-medium { .image-element__wrap { height: 60vh; @include respond-to('medium-down') { height: auto; } } } &.is-large { .image-element__wrap { height: 90vh; @include respond-to('medium-down') { height: auto; } } } } .banner__content { position: absolute; top: 50%; left: 50%; @include prefix(transform, translate(-50%, -50%), ms webkit spec); margin: auto; z-index: 3; width: 100%; } .banner__text { margin: auto; max-width: 900px; } .banner__heading { font-family: , ; font-weight: ; font-style: ; font-size: px; text-transform: ; color: ; @include respond-to('small-down') { font-size: 2em; } } .banner__subheading { font-family: , ; font-weight: ; font-style: ; font-size: px; letter-spacing: px; color: ; } .dark-overlay-true { position: relative; &:after { content: ''; position: absolute; z-index: 2; background: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; left: 0; right: 0; } } /* # Contact form ================================================== */ .contact-form { .contact-form__form { padding: 40px; @include respond-to('medium-down') { margin: 30px 0; } } .contact-form__image { margin-bottom: 25px; } .contact-form__blocks .contact-form__block { margin-bottom: 20px; label { color: inherit !important; // Inherit color of parent; } } .contact-form__block--radio, .contact-form__block--checkbox { .contact-form__list { margin: 0; list-style: none; li { @include flexbox; @include align-items(baseline); margin-bottom: 10px; input { top: 2px; margin-right: 7px; position: relative; } } } } .contact-form__social { .social-icons { list-style: none; margin: 20px 0 0 0; @include align-items(baseline); li { padding-right: 10px; } } } .text-align-right .social-icons { @include justify-content(flex-end); } .text-align-center .social-icons { @include justify-content(center); } } .contact-form--left { @include flex-direction(row-reverse); } .contact-form--right, .contact-form--left { .contact-form__offset .contact-form__form { margin: 0; } .contact-form__form { @include respond-to('medium-down') { margin-left: 0; margin-right: 0; } } } /* # Featured collection ================================================== */ .featured-collection-section, .block__featured-collection { .slider-gallery { width: 100%; } .flickity-prev-next-button { @include respond-to('medium-down') { display: none; } } } /* # Featured promotions ================================================== */ .featured-promotions { .has-gutter-enabled { .flickity-enabled .featured-promotions__block { margin-left: $half-gutter; margin-right: $half-gutter; } .featured-promotions__block--2:first-child { @include respond-to('small-down') { margin-bottom: $gutter; } } } } .featured-promotions__nav-wrapper { @include justify-content(flex-end); @include respond-to('small-down') { @include justify-content(space-between); } } .featured-promotions__nav { color: $link; margin-bottom: 10px; cursor: pointer; transition: color $transition-speed ease-in-out; &:first-child { margin-right: 10px; } &:hover { color: $link-hover; } } .is-width-wide .featured-promotions__nav:last-child { margin-right: 10px; } .featured-promotions__block { position: relative; } .featured-promotions__block--has-link:hover { .featured-promotions__content img, .featured-promotions__content svg { transform: $transition-zoom; } .has-border { border-width: 3px; } } .featured-promotions__block.has-image-crop { &:after { content: ''; display: block; padding-bottom: 100%; } .featured-promotions__content { position: absolute; width: 100%; height: 100%; } } .featured-promotions__content { position: relative; overflow: hidden; font-size: 1rem; img, svg { transition: all $transition-speed ease-in-out; } &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } } .featured-promotions__overlay { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; @include flexbox(); @include flex-direction(column); @include align-items(center); @include justify-content(center); z-index: 3; transition: all $transition-speed linear; padding: 0 $gutter; text-align: center; span { width: 50px; height: 50px; } &.has-border { border: thin solid; } } .featured-promotions__title { margin: 10px 0; text-align: center; line-height: 1.2; } .featured-promotions__subtitle p { padding: 5px 0; } .featured-promotions__wrapper { &:after { content: 'flickity'; display: none; } } .mobile-slider { .featured-promotions__nav-wrapper { @include respond-to('medium-up') { display: none; } } .featured-promotions__wrapper:after { @include respond-to('medium-up') { content: ''; } } } /* # Featured product ================================================== */ .featured-product { .product-thumbnail__title { display: block; padding-top: 0.5em; } .slideshow-enabled--false { .product-gallery__image:not(:first-child) { display: none; } } } .featured-product-section { .select, .select select { height: 44px; } } /* # Footer ================================================== */ $footer_text_color: ; $footer_background_color: ; $footer_font_size: px; $footer_heading_font: , ; $footer_heading_font_size: px; $footer_link_color: ; $footer_link_hover_color: ; $link_color: ; $link_hover_color: ; $regular_color: ; $footer_border: 0; $shop_bg_color: ; .footer__container { width: 100%; } .footer__content { background-color: $footer_background_color; color: $footer_text_color; font-size: $footer_font_size; a, a:visited { color: $footer_link_color; } a:hover, a:active { color: $footer_link_hover_color; } } .footer__heading { font-family: $footer_heading_font; font-size: $footer_heading_font_size; color: $footer_text_color; margin-bottom: 10px; } .footer__block { @include respond-to('small-down') { padding-bottom: 20px; } &.block__logo .footer__heading { @include logo-text-style(); } } .footer .social-icons li { padding-right: 5px; } .footer__logo-wrapper { width: 100%; &.is-small { max-width: 60%; @include respond-to('medium-down') { max-width: 30%; } } &.is-medium { max-width: 80%; @include respond-to('medium-down') { max-width: 50%; } } &.is-large { max-width: 100%; @include respond-to('medium-down') { max-width: 70%; } } .image-element__wrap { margin-right: 0; margin-left: 0; } } .footer__credits { font-size: smaller; } .footer__credits p { display: inline; } .footer__logo-wrapper { display: block; &:hover .footer__heading, &:hover img { opacity: 0.7; } .footer__heading, img { transition: opacity $transition-speed ease-in; } } /* # Gallery ================================================== */ .has-no-side-gutter .gallery__item { margin: 0; } .gallery-type--classic { @include flexbox(); @include flex-wrap(wrap); } .has-gutter-enabled .gallery__item { @include respond-to('medium-down') { margin-bottom: 20px; } } .gallery-type--horizontal-masonry { @include flexbox(); @include flex-wrap(wrap); img { width: 100%; } } .gallery__item { position: relative; &:hover .gallery-item__overlay { opacity: 1; } } .has-image-crop .gallery__item-wrap { height: 100%; } .gallery-item__overlay { @include flexbox(); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s ease; .icon { margin: 20px; width: 2.4rem; height: 2.4rem; } } /* # Header - Centered ================================================== */ /* # Header - Classic ================================================== */ /* # Header - Search focus ================================================== */ /* # Header - Vertical ================================================== */ /* # Header ================================================== */ header.header { @include respond-to('medium-down') { display: none; } } .header, .mobile-header { font-family: , ; font-weight: ; font-style: ; letter-spacing: px; font-size: px; text-transform: ; } .header__currency-dropdown { select { border: none; font-family: , ; font-weight: ; font-style: ; font-size: px; letter-spacing: px; text-transform: ; height: inherit; background: transparent; color: currentColor; } } .dropdown-style-horizontal { position: relative; } .dropdown-style-horizontal .navbar, .dropdown-style-horizontal .navbar-item { position: initial; } .dropdown-style-horizontal .header__menu-items, .header__dropdown--below-header.header__menu-items { height: 100%; .navbar-item.has-dropdown { @include align-self(stretch); } } .header__item { .vertical-alignment-center & { @include align-items(center); } .vertical-alignment-top & { @include align-items(flex-start); } .vertical-alignment-bottom & { @include align-items(flex-end); } } .header__link, .header__link > a { color: $header-link; fill: $header-link; &:hover, &.is-active { color: $header-link-hover; fill: $header-link-hover; } } .header__logo-text { @include logo-text-style(); } h1.header__logo-text > a { color: $header-link; } // Icon style .header__icons { @include flexbox(); @include justify-content(flex-end); @include align-items(center); } .header__icon-style-text { .header__icon, .header-cart__count--badge { display: none; } } .header__icon-style-icons { .icon-caption { display: none; } .header__currency-dropdown .icon-caption { display: block; position: absolute; opacity: 0; @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { left: 0; top: 50%; transform: translateY(-50%); } } } .header__icon-style-icons-text { text-transform: uppercase; .select { height: auto; } .icon-caption { padding: 0.3em 0 0; font-size: 0.7em; } .action-area__link.has-cart-count { padding-right: 1.8em; } .header-cart__caption { display: block; } .header__currency-dropdown { .icon { margin-bottom: 1.2rem; // match icon size } .icon-caption { display: block; position: absolute; } select { font-size: 1em; padding: 0; max-width: none; padding-top: 1.2rem; // match icon size } } } @-moz-document url-prefix() { .header__currency-dropdown select, .header__currency-dropdown select:hover { color: #FFF !important; } } .header__currency-dropdown { position: relative; overflow: hidden; select { color: $header-link; @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { color: transparent; } &:hover { color: $header-link-hover; @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { color: transparent; } } } } .action-area__link:not(.has-cart-count) { .header-cart__count { display: none; } } .action-area__link { @include flexbox(); @include flex-direction(column); @include align-items(center); padding: 1rem 5px; height: 100%; &:last-child { padding-right: 0; } .vertical-alignment-center & { @include justify-content(center); } .vertical-alignment-top & { @include justify-content(flex-start); } .vertical-alignment-bottom & { @include justify-content(flex-end); } } .has-submenu { label { display: block; position: relative; } .close-dropdown, .close-sub-dropdown { position: absolute; cursor: pointer; top: 0; right: 0; height: 100%; width: 25%; } } [data-enable_overlay="false"] { .overlay-logo__content { display: none; } .logo__content { display: block; } } [data-enable_overlay="true"] { .overlay-logo__content { display: block; } .logo__content { display: none; } } .header__logo { &:hover img { opacity: 0.7; } img { transition: opacity $transition-speed ease-in; } } /* # Heading ================================================== */ .heading-section__preheading { font-family: , ; font-size: px; font-weight: ; font-style: ; text-transform: ; } .heading-section__subheading { font-family: , ; font-size: px; font-weight: ; font-style: ; text-transform: ; } .heading-section__content { padding: 1.5rem 0; } // Vertical spacing .vertical-spacing-medium { .heading-section__preheading + .heading-section__heading { padding-top: 10px; } .heading-section__preheading + .heading-section__subheading { padding-top: 10px; } .heading-section__heading + .heading-section__subheading { padding-top: 10px; } .heading-divider { margin-top: 10px; } } .vertical-spacing-large { .heading-section__preheading + .heading-section__heading { padding-top: 20px; } .heading-section__preheading + .heading-section__subheading { padding-top: 20px; } .heading-section__heading + .heading-section__subheading { padding-top: 20px; } .heading-divider { margin-top: 20px; } } // Global heading style .heading-wrapper { margin-bottom: 40px; @include respond-to('medium-down') { margin-bottom: 20px; } &.text-align-center .heading-divider { margin: 0 auto; } &.text-align-right .heading-divider { margin: 0 0 0 auto; } } .has-heading-divider-below { @include respond-to('medium-up') { .heading-wrapper:not(.heading-divider-below) { margin-bottom: 0; } .heading-wrapper:not(.heading-divider-below) .heading-divider { display: none; } } } .heading-divider-below { @include respond-to('medium-down') { display: none; } } /* # Instagram ================================================== */ .has-gutter-enabled { .instagram__item, .instagram__placeholder { margin-bottom: 20px; } } .instagram__item, .instagram__placeholder { position: relative; overflow: hidden; } .instagram__item:hover { .instagram__bg { transform: $transition-zoom; } .instagram-overlay { @include respond-to('medium-up') { background-color: rgba(0,0,0,0.7); visibility: visible; opacity: 1; } } } .instagram__item:after { content: ""; display: block; padding-bottom: 100%; } .instagram__link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .instagram__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; transition: all $transition-speed ease-in-out; } .instagram__video-link { &:after, &:before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; } &:after { width: 0; height: 0; border: 16px solid transparent; border-left: 20px solid #fff; margin-top: -18px; margin-left: -7px; -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25)); } &:before { margin-top: -34px; margin-left: -34px; width: 60px; height: 60px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 4px rgba(black, 0.18); } &:hover { &:before { background: rgba(black, 0.7); } } } .instagram-overlay { @include align-items(center); @include justify-content(center); @include flex-direction(column); @include flexbox(); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(black, 0.42); transition: opacity $transition-speed ease-in-out; text-align: center; opacity: 0; z-index: 2; span { color: white; } .icon { margin-bottom: 10px; height: 1.5em; width: 1.5em; } } /* # Icon bar ================================================== */ .icon-bar__block { padding: 0.5rem 0.75rem; @include respond-to('medium-up') { &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } } // Sizes &.is-small { font-size: $size-small; } &.is-medium { font-size: $body-size; } &.is-large { font-size: $size-large; } .icon-bar__text { padding: 0 5px; } } /* # Icon with text column ================================================== */ .icon-with-text-column { .icon { margin-bottom: 20px; @include respond-to('medium-down') { margin-bottom: 0; margin-top: 20px; } &.is-small { height: 2.8rem; width: 2.8rem; } &.is-medium { height: 3.6rem; width: 3.6rem; } &.is-large { height: 5.4rem; width: 5.4rem; } } } /* # Image with text ================================================== */ .image-with-text { .has-gutter-enabled { .image-with-text__column:not(:last-child) { @include respond-to('medium-down') { margin-bottom: 20px; } } } } .image-with-text__image-column.has-image-crop { @include respond-to('medium-down') { height: 100vw; } } .image-with-text__text-column { padding-left: 20px; padding-right: 20px; &.has-background { padding: 30px; } @include respond-to('medium-down') { @include order(1); } } .image-with-text__heading { padding-bottom: 20px; line-height: 1.2; // Sizes &.is-small { font-size: floor($headline-font-size*0.8px); } &.is-regular { font-size: floor($headline-font-size*1px); } &.is-large { font-size: floor($headline-font-size*1.5px); } } .image-with-text__link { display: block; overflow: hidden; } .image-with-text__link:hover .image-with-text__image, .image-with-text__link:hover svg { transform: $transition-zoom; } .image-with-text__image, .image-with-text__link svg { transition: transform $transition-speed ease-in-out; } /* # Image with text overlay ================================================== */ $banner-font-family: , ; $banner-font-weight: ; $banner-font-size: px; $banner-letter-spacing: px; $banner-heading-font-family: , ; $banner-heading-font-weight: ; $banner-heading-style: ; $banner-heading-font-size: px; $banner-font-family: , ; $banner-font-weight: ; $banner-spacing: ; $banner-font-size: px; .block__image-with-overlay, .image-with-text-overlay, .image-slideshow { .image-with-text-overlay__container { width: 100%; } .caption-content { padding: 30px; min-width: 350px; @include respond-to('small-down') { min-width: auto; } } .mobile-text-under-true { @include respond-to('small-down') { & > .container { display: block; } .caption { position: static; text-align: center; margin-top: 20px; margin-bottom: 20px; } .caption-content { padding: 20px 0; } &.has-background .caption-content, &.has-border .caption-content { padding: 30px; } } .is-width-half { // moves breakpoint for half width earlier @include respond-to('large-down') { .caption { position: static; text-align: center; margin-top: 20px; margin-bottom: 20px; top: 0; transform: none; } .caption-content { padding: 20px 0; width: 100%; } } } } .mobile-text-under-false { @include respond-to('small-down') { .caption { top: 50%; bottom: auto; @include prefix(transform, translate(0, -50%), ms webkit spec); .caption-content { width: calc(100% - 20px); } } } } .image-crop-left img { min-height: 60vh; @include object-fit(cover, left); } .image-crop-center img { min-height: 60vh; @include object-fit(cover, center); } .image-crop-right img { min-height: 60vh; @include object-fit(cover, right); } .pretext, .subtitle { font-size: $banner-font-size; font-family: $banner-font-family; font-weight: $banner-font-weight; letter-spacing: $banner-letter-spacing; } .subtitle.image-with-text-overlay__subheading { padding-top: 10px; } .title { padding-top: 10px; } .image-with-text-overlay__banner { overflow: hidden; position: relative; @include respond-to('medium-down') { overflow: visible; } h1.title { @include headline-style($headline-font-size*2); } .placeholder-svg { min-height: 400px; } } .caption { position: absolute; width: 100%; display: block; padding: 1%; &.align-middle { @include respond-to('small-up') { top: 50%; @include prefix(transform, translate(0, -50%), ms webkit spec); } } &.align-top { top: 0; @include prefix(transform, none, ms webkit spec); } &.align-bottom { bottom: 0; top: auto; @include prefix(transform, none, ms webkit spec); } } .caption-content { display: inline-block; } .caption-overlay-true { z-index: 3; } .dark-overlay-true:after { content: ''; position: absolute; z-index: 2; background: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; left: 0; right: 0; } .banner--full-link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; font-size: 0; line-height: 0; z-index: 1; } } .image-with-text-overlay__buttons { @include justify-content(space-between); &.are-small { max-width: 300px; } &.are-regular { max-width: 400px; } &.are-large { max-width: 500px; } &.is-justify-left { @include justify-content(flex-start); } &.is-justify-right { @include justify-content(flex-end); } &.is-justify-center { @include justify-content(center); } .button { @include flex(0 0 calc(50% - 6px)); margin-bottom: 12px; white-space: normal; margin-left: 0; margin-right: 0; // Used to overwrite styling issues on IE11 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { width: 100% !important; max-width: calc(50% - 6px) !important; margin: 0px auto; } @include respond-to('small-down') { flex: 1 0 100%; } } } /* # List of collections page ================================================== */ .list-collection-wrapper .list-collection__thumbnail { display: block; margin-bottom: 30px; } .collection-list { .has-no-side-gutter .list-collection__thumbnail { margin-bottom: 0; } } .list-collection__thumbnail { overflow: hidden; .product-wrap { position: relative; overflow: hidden; &:hover img, &:hover svg { @include prefix(transform, scale(1.1), ms webkit spec); } } img, svg { transition: all 0.3s ease-in-out; } } .collection-thumbnail-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; } .collection-info__caption { @include flexbox(); @include align-items(flex-end); @include flex-wrap(wrap); position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; z-index: 2; .title { display: block; margin-bottom: 20px; @include headline-style($headline-font-size); } } .collection-info__caption--below-image { padding: 20px; @include flexbox(); @include flex-direction(column); @include align-items(center); .title { text-align: center; } } /* # Logo list ================================================== */ .logo-list { .has-background { padding-top: 20px; } .logo-list__wrapper { @include respond-to('small-down') { max-width: $site-max-width; width: $site-width; } } } /* # Map ================================================== */ .maps { width: 100%; } .map { height: 100%; width: 100%; } /* # Mobile Header ================================================== */ .mobile-menu--opened { overflow: hidden; -webkit-overflow-scrolling: touch; height: 100vh; } #mobile-header .mobile-header__logo { width: 100%; } .mobile-header { background-color: $header-background; transition: background-color 0.3s linear, height 0.2s linear; width: 100%; @include respond-to('medium-up') { display: none; } } .mobile-header__content { @include flexbox(); @include align-items(center); height: 100%; position: relative; z-index: 10; @include respond-to('medium-down'){ padding: 0 20px; } @include respond-to('small-down'){ padding: 0 10px; } } .mobile-menu__toggle-icon { @include flexbox(); @include align-items(center); cursor: pointer; transition: visibility 0s linear, opacity 0.33s linear 0.1s; padding: 10px 5px 10px 0; .icon { fill: $header-link; } .mobile-header__open-menu { transition: visibility 0s linear, opacity 0.33s linear 0.1s; } .mobile-header__close-menu { opacity: 0; visibility: hidden; position: absolute; transition: visibility 0s linear, opacity 0.33s linear 0.1s; } &.is-active { .mobile-header__open-menu { opacity: 0; visibility: hidden; position: absolute; } .mobile-header__close-menu { opacity: 1; visibility: visible; position: relative; } } } .mobile-layout--left { .mobile-logo { width: calc(50% - 10px); } .mobile-dropdown, .mobile-icons { width: calc(25% - 10px); } .mobile-icons { @include justify-content(flex-end); } &.mobile-logo__position--left { .mobile-dropdown, .mobile-icons { width: auto; } } } .mobile-logo, .mobile-dropdown, .mobile-icons { @include flexbox(); @include align-items(center); padding: 0 5px; } .mobile-icons { @include order(2); } .mobile-dropdown { @include order(0); } .mobile-logo { @include order(1); @include justify-content(center); @include flex-grow(1); text-align: center; padding-top: 5px; padding-bottom: 5px; .image-element__wrap { max-width: px !important; //used to override inline width setting } } .mobile-logo__position--left .mobile-logo { @include order(0); @include justify-content(left); text-align: left; } .mobile-layout--left.mobile-logo__position--below { @include flex-wrap(wrap); .mobile-dropdown, .mobile-icons { width: 50%; } .mobile-logo { display: none; } } .mobile-layout--right .action-area__link.has-cart-count { padding-right: 5px; } .mobile-layout--right.mobile-logo__position--below { @include flex-wrap(wrap); .mobile-icons { @include flex-grow(1); @include flex-wrap(wrap); @include justify-content(flex-end); } .mobile-logo { display: none; } } .mobile-dropdown__position--left { @include order(0); } .mobile-dropdown__position--right { @include order(3); padding-top: 5px; } .mobile-logo__outer { @include justify-content(center); @include flexbox(); background-color: $background; padding: 10px 0; width: 100%; a { color: ; } .image-element__wrap { max-width: px !important; //used to override inline width setting } } // Mobile menu .mobile-menu a { color: $header-link; &:hover { color: $header-link-hover; } } .submenu__label:hover a { color: $drop-down-menu-hover-color; } .mobile-menu__submenu { font-size: $drop-down-menu-font-size; letter-spacing: $drop-down-menu-letter-spacing; text-transform: $drop-down-menu-font-style; } .mobile-menu__toggle-icon.is-active + .mobile-menu { transition: left 0.5s; left: 0; } .mobile-menu { max-height: 100%; min-height: 100vh; left: -100%; position: absolute; top: 100%; transition: left 0.3s ease-in-out; width: 100%; z-index: 40; .mobile-menu__item { @include align-items(center); .icon { fill: $header-link; margin-right: 12px; &:hover { color: $header-link-hover; } } select { color: $header-link; &:hover { color: $header-link-hover; } } } .mobile-menu-link, .mobile-menu__item { @include flexbox(); line-height: 1.5; padding: 0.5rem 1.5rem; } } .mobile-menu__content { padding-bottom: 100px; height: 100%; overflow-y: scroll; .icon-caption { padding: 0; font-size: 1em; } } .mobile__currency-dropdown { @include align-items(center); position: relative; .icon-caption { position: absolute; } select { border: none; font-family: , ; font-weight: ; font-style: ; font-size: px; letter-spacing: px; text-transform: ; height: inherit; background: transparent; color: currentColor; } } .mobile-menu-icons { @include flexbox(); @include justify-content(center); position: absolute; top: 75vh; width: 100%; padding: 0; } .mobile-menu-link { position: relative; &::after { @extend %arrow; border-color: $input-arrow; right: 1.125em; z-index: 4; font-size: 1.1em; } } .mobile-menu__submenu { transition: max-height 0.5s; border-left: 1px solid ; margin-left: 20px; max-height: 0; overflow: hidden; padding-left: 0; &.has-mega-menu { margin-left: 0; max-height: none; display: none; } .mega-menu { display: block; position: relative; background-color: $background !important; // Override injected stylesheet left: 0; } } .submenu__input { &:checked { & ~.mobile-menu__submenu { transition: max-height 0.8s; max-height: 100vh; } & ~.mobile-menu__submenu.has-dropdown { max-height: 100vh; } & ~.mobile-menu__submenu.has-mega-menu { max-height: none; display: block; border-left: 0; } & + label a:after { transform: translateY(-60%) rotate(180deg); } } & + label a:after { transition: transform 0.2s linear; } } // Mobile menu icons .header__icon-style-text, .header__icon-style-icons-text { .mobile-icons { @include flex-wrap(wrap); @include justify-content(center); &.has-one-icon { @include justify-content(flex-end); } } .mobile-icons .action-area__link { padding: 5px; } .header-cart__caption { white-space: nowrap; } } .header__icon-style-icons { .mobile__currency-dropdown .icon-caption { display: block; opacity: 0; } } .header__icon-style-text { .mobile__currency-dropdown { line-height: 1.5; padding: 0.5rem 1.5rem; .icon-caption { position: relative; } select, option { padding-left: 0px; } } } // Negate firefox ghost padding @-moz-document url-prefix() { .header__icon-style-text .mobile__currency-dropdown select { text-indent: -2px; } } .header__icon-style-icons-text { .mobile__currency-dropdown select { padding-left: 25px; } } .mobile-menu__toggle-button { display: none; cursor: pointer; position: absolute; top: 0; left: 0; width: 45px; z-index: 50; bottom: 0; &.mobile-toggle__position--right { right: 0; left: initial; } @include respond-to('medium-down') { display: block; } } /* # Mega menu ================================================== */ .mega-menu-section { display: none; } #header .is-width-wide .mega-menu { width: calc(100% + #{$gutter}); left: calc(-#{$gutter} / 2); // Used to break out of the container on full width } .header--search-focus .mega-menu { overflow: auto; } .mega-menu { display: none; left: 0; font-size: $drop-down-menu-font-size; letter-spacing: $drop-down-menu-letter-spacing; text-transform: $drop-down-menu-font-style; position: absolute; top: 100%; width: 100%; min-width: 100%; z-index: 20; box-shadow: 0 8px 8px rgba($black, 0.1); @include respond-to('medium-down') { box-shadow: 0; } &.mega-menu--show { display: block; } &.mega-menu--force-show { display: block !important; z-index: 30 !important; } a, a:active, a:visited { color: $drop-down-menu-active-color; } a:hover { color: $drop-down-menu-hover-color; } .menu__heading { margin-bottom: 10px; font-size: $drop-down-menu-heading-font-size; line-height: 1.2; } .mega-menu__linklist-link { display: inline-block; padding: 0.5em 0; line-height: 1; } .mega-menu__image { max-height: none; } } .mega-menu__block { padding: 20px; &.block__empty-column { @include respond-to('medium-down') { display: none; } } &.block__featured-promo .button { width: 100%; } .mega-menu__content { margin-top: 10px; &:first-child { margin-top: 0; } } &.block__featured-product .price { font-size: 0.9em; } } .mega-menu__banner { padding: 0.75em 1em; width: 100%; transition: background-color 0.2s linear; .icon { @include flex-shrink(0); } .mega-menu__sticker-text { padding: 0 0.5em; } // Sizes &.is-small { font-size: 0.8rem; } &.is-regular { font-size: 1rem; } &.is-large { font-size: 1.2rem; } } .navbar-item.has-mega-menu { position: static; } .mega-menu__section.is-active { .mega-menu { display: block; } } /* # Popup ================================================== */ .popup-modal { .fancybox-bg { opacity: 1; } .fancybox-slide { @include flexbox(); @include justify-content(center); @include align-items(center); padding: 40px; @include respond-to('small-down') { @include align-items(flex-end); padding: 0; } } } .popup__wrapper { display: none; padding: 0; max-width: 900px; width: 90%; position: relative; overflow: hidden; @include respond-to('small-down') { width: 100%; } &.animated { opacity: 0; } &.has-image .newsletter-form { max-width: 100%; } } .popup__text { font-size: 1rem; } .popup__close { display: block; position: absolute; top: 0; right: 0; margin: 10px; cursor: pointer; .icon--vertical-align { @include flexbox(); @include justify-content(center); margin: auto; } } // Form .newsletter-section--popup { margin: 0; padding-top: 20px; width: 100%; max-width: none; .newsletter__wrapper { max-width: 100%; padding: 0; } } // Image .popup__image { @include align-items(center); position: relative; min-width: 200px; width: 40%; &.has-image-crop img { position: absolute; top: 50%; left: 50%; @include prefix(transform, translate(-50%, -50%), ms webkit spec); margin: auto; width: 100%; } @include respond-to('small-down') { display: none; } } .image-position-right { .popup__image { @include order(1); } .popup__close { left: 0; right: auto; } } // Text .popup__content { max-width: calc(75% - 80px); margin: 0 auto; @include flexbox(); @include flex-direction(column); @include justify-content(center); @include flex(1 0 60%); padding: 40px; @include respond-to('medium-down') { max-width: 100%; padding: 20px; } } .popup__header { width: calc(100% - 12px); @include respond-to('medium-down') { margin: 0 10px; } } /* # Rich text ================================================== */ .mobile-shrink-text span, .mobile-shrink-text p { font-size: 1em; display: block; @include respond-to('medium-down') { font-size: 0.8em; } @include respond-to('medium-down') { font-size: 0.5em; } } .rich-text__content a.button { max-width: 50%; @include respond-to('medium-down') { max-width: 100%; } } /* # Search ================================================== */ $search-border: thin solid $border !default; $search-border-radius: 0; .search-form { @include respond-to('medium-down') { padding-top: $gutter; } .search__fields { input[type="text"] { outline: none; border-radius: $search-border-radius; border: $search-border; color: $grey; &:active, &:focus { color: $black; box-shadow: none; } } [data-icon="search"] { padding: 5px; color: $black; } } } /* # Search page - default view and results ================================================== */ .search-result__image-container { @include respond-to('small-down') { padding-bottom: 20px; } } /* # Search overlay & Popup ================================================== */ $search-overlay-bg-color: ; $search-menu-link: ; $search-menu-hover-link: ; $search-menu-title: ; $search-popup-bg-color: ; $search-item-border: ; // Shared [data-show-search-trigger] { cursor: pointer; * { pointer-events: none; } } .search-overlay__title, .search-popup__title { color: $search-menu-title; } .search-overlay__form, .search-popup__form { padding: 20px 0; .field:not(:last-child) { padding-bottom: 0; } } .search-menu__list { display: inline; list-style: none; padding-left: 5px; @include respond-to('medium-down') { padding-left: 0; padding-top: 5px; } } .search-menu__item { display: inline-block; padding: 0 5px; @include respond-to('medium-down') { width: 100%; padding: 0; } a, a:visited { color: $search-menu-link; &:hover, &:focus { color: $search-menu-hover-link } } } // Overlay .search-overlay.is-opened { display: block; } .search-overlay { background-color: $search-overlay-bg-color; color: $search-menu-title; position: absolute; top: 100%; left: 0; display: none; width: 100%; z-index: 5; .search-menu { @include respond-to('large-up') { max-width: 70%; margin: 0px auto; } } } .search-overlay__close { cursor: pointer; position: absolute; top: 15px; right: 15px; &:hover { opacity: 0.5; } } .search-overlay__wrapper { padding: 60px 0; } // Popup .search-popup { display: none; background-color: $search-popup-bg-color; color: $search-menu-title; max-width: 600px; padding: 60px 0 45px; font-size: 1.2em; .search-overlay__wrapper { padding: 0 45px; } .search-menu { @include flexbox(); @include flex-wrap(wrap); @include justify-content(space-between); } .search-menu__title { padding-bottom: 20px; @include respond-to('medium-down') { padding-bottom: 0; } } .search-menu__item { width: 45%; padding: 0; display: block; @include respond-to('medium-down') { width: 100%; text-align: center; } } } .search-popup__form { @include respond-to('large-up') { margin: 0px auto; } } // Predictive search .predictive-results { opacity: 0; list-style: none; background-color: white; padding: 0; position: absolute; top: 100%; width: 100%; z-index: 10; transition: opacity 0.25s ease-in-out; box-shadow: 0 8px 8px rgba($black, 0.1); li { border-top: 1px solid $search-item-border; padding: 10px; a, a:visited { color: $text; } a:hover, a:active { color: $text-light-opacity; } &:first-child { border-top: 0; } } } .result-link { @include flexbox(); @include align-items(center); } .result-image { max-width: 40px; margin-right: 10px; } .result-info { @include flexbox(); @include flex-direction(column); .money { font-weight: bold; } } .search__lightbox .predictive-results { position: relative; } /* # Sidebar ================================================== */ .sidebar-section { @include respond-to('medium-down') { @include order(1); width: 100% !important; //to overwrite desktop styles set inside of section & + .has-sidebar-option { width: 100% !important; //to overwrite desktop styles set inside of section } } } .sidebar-block__heading { @include flexbox(); @include align-items(center); position: relative; + .sidebar-block__content { padding-top: 0.9rem; } } .sidebar-block__content { margin-bottom: 20px; } .sidebar__block { &.sidebar-toggle-active { padding-top: 10px; padding-bottom: 10px; } &:first-child { padding-top: 0; } &:last-child { padding-bottom: 0; } } // Sidebar Toggling .sidebar-block__toggle-icon { position: absolute; right: 0; border: none; top: 50%; transform: translateY(-50%); padding: 0; background: transparent; &:focus { outline: 0; } .icon { color: $black; transition: transform 0.2s linear; } } // Hide second toggle icon by default .icon-style--plus_and_minus .icon.icon--active + .icon { display: none; } .sidebar-toggle-active.is-active { .icon-style--carets .icon { @include prefix(transform, rotate(180deg), ms webkit spec); } .icon-style--plus_and_minus .icon.icon--active { display: none; + .icon { display: block; } } } [data-sidebar-block__content--collapsible] { display: none; } .sidebar-block__recent-post { margin-bottom: 10px; .label { font-weight: normal; } } .block__featured-promo { @include respond-to('medium-up') { width: 75%; } .card-content { padding: 20px; } .sidebar__promo-content { margin-left: 0; } } .block__newsletter { .newsletter-section { width: 100%; } .newsletter__wrapper { max-width: 100%; } .newsletter__text { color: inherit !important; // Inherit color of parent section } } .block__menu { .sidebar-block__item { margin-bottom: 5px; } } .block__tag-filter { .tag-filter__item { @include flexbox(); @include align-items(center); @include justify-content(space-between); margin-bottom: 5px; } .tag-filter__label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; color: $link; transition: 0.2s linear; @include flexbox(); @include align-items(center); &:hover { color: $link-hover; } } .tag-filter__item.is-active .tag-filter__label { cursor: initial; color: initial; &:hover { color: initial; } } .tag-filter__checkbox--regular { display: none; } .tag-filter__swatch { -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; display: inline-block; position: relative; vertical-align: top; background-size: cover; margin-right: 10px; font-size: 0; input[style*="no-image-50"], input.swatch__image--empty { opacity: 0; } } .tag-filter__checkbox--swatch { -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 20px; border-radius: 50%; background-size: cover; background-position: center; } } /* # Slideshow with text ================================================== */ .slideshow-with-text { .has-gutter-enabled { .image-slideshow { @include respond-to('medium-down') { margin-bottom: $gutter; } } } .flickity-prev-next-button .flickity-button-icon { position: absolute; top: 50%; width: 45%; height: 45%; transform: translateX(-50%) translateY(-50%); } .text-slideshow__heading.banner__subheading { font-family: , ; font-size: px; font-weight: ; font-style: ; } .text-slideshow__heading.banner__heading { font-family: , ; font-size: px; font-weight: ; font-style: ; } } .image-slideshow { opacity: 0; transition: opacity 0.4s; width: 100%; margin: 0 auto; @include respond-to('medium-down') { @include order(1); } .placeholder-svg { height: 500px; @include respond-to('medium-down') { height: 300px; } } .flickity-buttons-container { position: absolute; @include flexbox(); bottom: 20px; right: 20px; @include respond-to('medium-down') { display: none; } } .flickity-button { position: static; display: block; @include prefix(transform, none, ms webkit spec); &:first-child { margin-right: 10px; } } } .image-slideshow-position--left { .flickity-buttons-container { left: 5%; right: auto; } } .image-slideshow-position--right { @include order(2); @include respond-to('medium-down') { @include order(0); } } .image-slideshow.flickity-enabled { opacity: 1; height: auto; } .image-slideshow__slide { width: 100%; .image-element__wrap { width: 100%; height: auto; } } .text-slideshow { @include flexbox(); @include flex-direction(column); @include justify-content(center); width: 100%; height: 100%; .flickity-viewport, .flickity-slider { height: 100%; } .flickity-page-dots { @include align-self(flex-end); position: static; padding-bottom: 3em; @include respond-to('medium-down') { padding-top: 3em; padding-bottom: 0; @include order(-1); } } &.flickity-page-dots--hidden { .flickity-page-dots { display: none; @include respond-to('medium-down') { display: block; } } } } .text-slideshow__slide { width: 100%; @include flexbox(); @include align-items(center); padding: 3em; } .text-slideshow__content { width: 100%; opacity: 0; animation-delay: 0.2s; &.animated.none { opacity: 1; } .button { margin-top: 10px; } } .text-slideshow__heading { padding-bottom: 20px; line-height: 1.5; margin: 0; &.subtitle { font-size: $body-size; } } /* # Slideshow - classic ================================================== */ .slideshow-classic { width: 100%; &.page-dots--true { @include respond-to('small-down') { padding-bottom: 25px; margin-bottom: 25px; } } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 50%; top: 50%; width: 45%; height: 45%; transform: translateX(-50%) translateY(-50%); } .text-below-image--false .caption { top: 50%; @include prefix(transform, translateY(-50%), ms webkit spec); } .text-below-image--true .caption { @include respond-to('small-down') { position: static; text-align: center; margin-top: 20px; margin-bottom: 20px; } } .gallery-cell { width: 100%; .image-element__wrap { width: 100%; } @include respond-to('small-down') { display: block; } } .flickity-button, .flickity-page-dots { position: absolute; top: auto; bottom: 25px; } .flickity-button { z-index: 10; @include respond-to('small-down') { display: none; } } .flickity-page-dots { bottom: 40px; @include respond-to('small-down') { bottom: 0; } } } .slideshow-classic__buttons { @include justify-content(space-between); &.are-small { max-width: 300px; } &.are-regular { max-width: 400px; } &.are-large { max-width: 500px; } &.is-justify-left { @include justify-content(flex-start); } &.is-justify-right { @include justify-content(flex-end); } &.is-justify-center { @include justify-content(center); } .button { @include flex(0 0 calc(50% - 6px)); margin-bottom: 12px; white-space: normal; margin-left: 0; margin-right: 0; // Used to overwrite styling issues on IE11 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { width: 100% !important; max-width: calc(50% - 6px) !important; margin: 0px auto; } @include respond-to('small-down') { flex: 1 0 100%; } } } .slideshow-classic__banner { overflow: hidden; position: relative; @include respond-to('medium-down') { overflow: visible; } h1.title { @include headline-style($headline-font-size*2); } .slideshow-classic__subheading { padding-top: 10px; } .placeholder-svg { min-height: 400px; } } /* # Testimonial ================================================== */ .testimonials { @include flexbox(); &:after { content: 'flickity'; display: none; } } .testimonial-block { @include flexbox(); @include flex-wrap(wrap); @include justify-content(space-between); min-height: 100%; overflow: hidden; @include respond-to('medium-down') { margin-bottom: 20px; } &.testimonial-border--true { border: thin solid $border; } &.testimonial-align--center { .testimonial__description, .testimonial__name { @include justify-content(center); text-align: center; } .testimonial__image { left: 50%; margin-left: -50px; } } } .testimonial__description, .testimonial__name { @include flexbox(); @include flex-direction(column); @include justify-content(center); text-align: left; width: 100%; position: relative; } .testimonial__name { @include align-self(flex-end); padding: 70px 40px 25px; margin-top: 40px; max-height: 175px; height: 175px; @include respond-to('large-down') { font-size: 0.85rem; } @include respond-to('medium-down') { font-size: 1rem; max-height: 23vh; height: 23vh; } } .testimonial__description { @include align-self(center); padding: 40px; height: 100%; min-height: 250px; } .testimonial__image { position: absolute; margin-top: -50px; height: 100px; width: 100px; max-width: 100px; max-height: 100px; top: 0; &.image-style--circle img, &.image-style--circle svg { border-radius: 50%; } } .no-testimonial-image { .testimonial__description, .testimonial__name { padding: 40px; } } .testimonial__nav-wrapper { @include justify-content(flex-end); @include respond-to('small-down') { @include justify-content(space-between); } } .testimonial__nav { color: $link; margin-bottom: 10px; cursor: pointer; &:first-child { margin-right: 10px; } &:hover { color: $link-hover; } } .is-width-wide .testimonial__nav:last-child { margin-right: 10px; } .mobile-slider .testimonials { &:after { @include respond-to('medium-up') { content: ''; } } } .desktop-slider--disabled { .testimonial__nav-wrapper { @include respond-to('medium-up') { display: none; } } .testimonial__description { height: initial; } } /* # Top bar ================================================== */ .top-bar { @include respond-to('medium-down') { display: none; } } .top-bar .navbar-item { @include flex(1 1 auto); text-align: center; } .top-bar__text { padding-left: 0.75rem; min-width: 25%; } .top-bar__item { @include flexbox(); @include align-items(center); &:first-child { @include justify-content(flex-start); } &:last-child { @include justify-content(flex-end); } } .top-bar__menu { @include flex(1 0 auto); @include flexbox(); @include align-items(center); @include respond-to('medium-down') { @include justify-content(center); } } .top-bar__social-media { a { line-height: 0; margin-left: 5px; margin-right: 5px; display: block; } .social-icons { @include respond-to('medium-down') { @include justify-content(center); } } } .top-bar__icons.cart--hidden { padding-right: 20px; } .top-bar__content { .header__currency-dropdown select { color: inherit; &:hover { color: inherit; } } .header__icon-style-text .header__currency-dropdown select { padding-top: 0; padding-bottom: 0; height: auto; line-height: inherit; } } /* # Video ================================================== */ .featured-video.is-width-half.has-video-added { @include respond-to('medium-down') { background-color: transparent; } .video-wrapper { @include flex(1); } } .video__container { width: 100%; } .video-wrapper { position: relative; background-color: $black; &.overlay--text_only { .video__text-wrapper { position: relative; } } video { display: block; width: 100%; height: auto; } video[poster] { @include object-fit(cover); } .poster-enabled { background-size: cover; iframe { z-index: -1; } } [data-video-element] { @include respond-to('medium-down') { @include order(2); } } .video__text-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 5; .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: -1; } @include respond-to('medium-down') { position: relative; margin: 0; } } .video__text { height: 100%; text-align: center; @include flexbox(); @include flex-direction(column); } .video__text-wrapper { margin: 0; padding: 30px; .button { max-width: 50%; @include respond-to('medium-down') { max-width: 100%; } } } @include respond-to('medium-down') { @include flexbox(); @include flex-direction(column); } } /* # Accounts ================================================== */ .register__image img, .login__image img { width: 100%; } .register__form img, .login__form img { max-width: 200px; margin: 0; } .or { margin-left: 10px; } // Recover .login__recover { display: none; } .recover-note { margin: 0.75rem 0; } .action_bottom .button, .recover-options .button { margin-right: 5px; } /* # Blog ================================================== */ $blog-border: thin solid $border !default; .blog__filter { margin-bottom: 20px; .select, select { @include respond-to('small-down') { width: 100%; } } .is-grouped { @include justify-content(flex-end); @include respond-to('medium-down') { @include justify-content(flex-start); } } } .blog-main { @include flexbox(); .select { border-color: ; } } .meta-info-list { font-size: 0.8em; .meta-info-list__item { margin-right: 5px; display: inline-block; a, span { padding-left: 5px; color: ; } &:first-child a, &:first-child span { padding-left: 0; } &:last-child { margin-right: 0; } & + li:before { content: "|"; color: $text-light-opacity; } } } // vertical card styles .blog-card { @include flexbox(); @include flex-direction(column); @include justify-content(flex-start); border: $blog-border; box-shadow: 0 2px 3px , 0 0 0 1px ; @include respond-to('medium-down') { margin-bottom: 20px; } &.show-border-false { border: none; box-shadow: none; .card-content { padding-left: 0; padding-right: 0; } .blog-card__read-more { margin-left: 0; margin-right: 0; } } .blog-card__content > div:not(:last-child), .meta-info > ul:not(:last-child) { margin-bottom: 1rem; } .image-element__wrap { @include respond-to('medium-up') { max-height: none; } } .media-content { font-size: $title-size; .title { font-size: 0.8em; } } .blog-card__read-more { margin: auto 1.5rem 1.5rem; .button { height: auto; white-space: normal; } } } // horizontal card styles .blog-card.is-horizontal { @include respond-to('medium-up') { @include flex-direction(row); @include flex-grow(0); @include flex-shrink(1); max-height: 330px; .blog-card__image { width: 33.33%; .image { position: relative; overflow: hidden; height: 100%; width: 100%; .image-element__wrap { height: 100%; max-height: none; img { height: 100%; @include object-fit(cover, center); } } } } .blog-card__content { @include flexbox(); @include flex(3); @include flex-direction(column); } &.show-border-false { box-shadow: none; .blog-card__content { padding: 1.5rem; } .blog-card__read-more { margin-left: 0; } } .blog-card__read-more { margin: auto 0 0; } } } // mobile card styles @include respond-to('medium-down') { .blog-card { &.is-horizontal { .blog-card__read-more { margin: 0; } } .image-element__wrap { max-height: none; } } } .excerpt { @include word-wrap(); position: relative; max-height: 6em; overflow: hidden; &.excerpt-length-sm .truncation-fade { display: none; } } .excerpt-length-lg .truncation-fade { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; margin: 0; padding: 30px 0; background-image: $truncation-fade; } .blog-card__link:hover .blog-card__image, .blog-card__link:hover svg { transform: $transition-zoom; } .blog-card__image, .blog-card__link svg { transition: transform $transition-speed ease-in-out; } /* # Cart ================================================== */ $sale-color: ; $subtotal-bg-color: #F2F2F2; //Enabled quantity box .quantity-box-enabled-true { .cart__product-title { width: 49%; } .cart__price-title, .cart__quantity-title, .cart__total-title { width: 17%; } } //Disabled quantity box .quantity-box-enabled-false { .cart__product-title { width: 66%; } .cart__price-title, .cart__total-title { width: 17%; } .cart__description { width: 60%; @include respond-to('small-down') { width: 100%; } } } // Table headings .cart__headings { @include flexbox(); @include justify-content(space-between); width: 100%; padding-bottom: 10px; @include respond-to('large-down') { display: none; } } .cart__price-title, .cart__quantity-title, .cart__total-title { text-align: center; } // Cart items .cart__card { @include flexbox(); @include align-items(center); border-top: 1px solid $border; padding-top: 20px; margin-bottom: 20px; @include respond-to('medium-down') { @include align-items(flex-start); } } .item__title { font-size: 1.25em; } .item__properties { padding-top: 20px; @include respond-to($medium-down) { padding-top: 0px; font-size: 0.7em; } } .cart__info { @include flexbox(); @include justify-content(space-between); @include align-items(center); width: 85%; @include respond-to($medium-down) { @include flex-direction(column); width: 60%; padding-left: 20px; } } .cart__total, .cart__price { @include flex-direction(row); text-align: center; span { display: block; } } .cart__total { @include respond-to($medium-down) { display: none; } } .cart__image { width: 15%; @include respond-to($medium-down) { width: 30%; } } .cart__description { width: 40%; padding: 0 20px; @include respond-to($medium-down) { width: 100%; padding: 0; text-align: left; } } .cart__total, .cart__quantity, .cart__price { width: 20%; @include respond-to($medium-down) { width: 100%; text-align: left; } } .cart__price .sale, .cart__price .original-price { @include respond-to('medium-down') { display: inline-block; } } .cart__quantity { @include flexbox(); @include flex-wrap(wrap); position: relative; .purchase-details__quantity.product-quantity-box { margin-right: 0; width: 100%; } .quantity-wrapper.quantity-style--box .quantity-input-control--fill { width: auto; } @include respond-to('large-up') { @include justify-content(center); .quantity-input { width: 50px; } } @include respond-to($medium-down) { margin-top: 20px; .purchase-details__quantity { width: 50%; max-width: 100px; margin-top: 0; } } @include respond-to('small-down') { .quantity-style--stacked .quantity-input { width: 65px; } } .quantity-style--box { max-width: 75%; margin: 0 auto; @include respond-to('medium-down') { max-width: 100%; } } } .cart__quantity-warning { width: 100%; text-align: center; margin-top: 10px; } .cart__remove { position: absolute; right: 0; top: 10%; @include respond-to('medium-down') { position: static; margin-left: 5px; } } // Line item discounts .original-price { opacity: 0.2; } .line-item-discount__container { color: $sale-color; background: rgba(199, 0, 0, 0.1); border-radius: 3px; font-size: 0.8em; padding: 10px; margin: 5px 0; } // Total pricing .cart__cost-summary { background: $subtotal-bg-color; padding: 20px; margin-top: 20px; @include respond-to('medium-down') { padding: 20px 15px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); @include align-items(center); .offset-by-eight { left: 0; } } .cart__discount-title { @include respond-to('medium-down') { max-width: 75%; } } .cart__discounts p, .cart__total-savings p { color: $sale-color; } .cart__subtotal-container p { font-weight: bold; } .cart__row { @include flexbox(); @include justify-content(space-between); padding-top: 14px; text-align: right; &:first-child { padding-top: 0; } @include respond-to('medium-down') { text-align: left; } .cart__row-description { width: 60%; @include respond-to('medium-down') { width: 100%; } } } } .cart__savings { @include justify-content(flex-end); padding: 20px 0; text-align: right; @include respond-to($medium-down) { @include justify-content(center); font-size: 1.5em; padding: 20px 0 0; } } .cart__savings, .sale { color: ; } .was-price { color: ; } // Cart notes and messages .cart__notes { width: 100%; } .cart__tos { padding-bottom: 20px; .tos_agree { margin-right: 5px; } } .cart__view-terms-container { display: inline-block; } .cart__cart-message { margin: 20px 0 0; text-align: right; display: block; @include respond-to($medium-down) { text-align: center; } } // Checkout .cart__checkout { min-width: 236px; /* Set a minimum width to match the width of additional checkout buttons. */ margin-left: 20px; .checkout { @include btn-add-to-cart; width: 100%; min-height: 42px; /* Set a minimum height to match the height of additional checkout buttons */ @include respond-to($medium-down) { min-height: 52px; margin-bottom: 15px; } } @include respond-to($medium-down) { width: 100%; margin-left: 0; } } .cart__checkout-elements { @include justify-content(flex-end); @include respond-to($medium-down) { @include justify-content(center); } } .cart__buttons { @include respond-to($medium-down) { @include flex-direction(column-reverse); @include flex-wrap(wrap); } } // Additional checkout buttons .additional-checkout-buttons { width: 100%; margin-top: 10px; } [data-shopify-buttoncontainer] { @include justify-content(flex-end); } // Shipping calculator .shipping-calculator { select, .select { width: 100%; } @include respond-to($medium-down) { @include flex-direction(column); .control { min-width: 100%; margin-bottom: 20px; } input { width: 100%; } .select, select, input { @include respond-to('medium-down') { height: 3.25em; } } } } .cart__shipping-calculator { margin-top: 50px; padding-bottom: 20px; width: 100%; @include respond-to('medium-down') { text-align: center; } .cart__shipping-calculator-form { @include respond-to('medium-down') { text-align: left; } .select { @include respond-to('medium-down') { width: 100%; } } } .cart__shipping-title { padding-bottom: 50px; @include respond-to('medium-down') { text-align: center; } } label { padding-bottom: 20px; text-transform: uppercase; opacity: 0.5; @include respond-to('medium-down') { padding-bottom: 10px; } } .calc-field { margin-left: 0; margin-right: 20px; @include flexbox(); @include flex-direction(column); @include respond-to('medium-down') { margin-right: 0; width: 100%; } } } #get-rates-container { @include respond-to('medium-down') { width: 100%; } } .get-rates { @include respond-to($medium-down) { margin-top: 10px; @include flex(1); } } .shipping-calculator__response-container { display: none; } .heading-wrapper--shipping-rates { margin-left: 0; margin-right: 0; @include respond-to('medium-down') { @include align-items(center); } } .shipping-rates__title { padding-top: 45px; @include respond-to('medium-down') { padding-top: 25px; } } .shipping-calculator__response { ul > li { padding-bottom: 20px; @include flexbox(); @include align-items(center); @include respond-to('medium-down') { @include justify-content(center); } &:last-child { padding-bottom: 0; } .icon { margin-right: 10px; } } .shipping-calculator__message { padding-bottom: 20px; } } .shipping_calculator__response--visible { display: block; } .cart__price .discount-area span { display: inline; } /* # Collection ================================================== */ .collection__filters { margin-bottom: 20px; .select { max-width: 50%; @include respond-to('small-down') { max-width: 100%; } } .select:first-child { @include respond-to('small-down') { margin-bottom: 10px; } } .select, select { @include respond-to('small-down') { width: 100%; } } .is-grouped { @include justify-content(flex-end); @include respond-to('medium-down') { @include justify-content(flex-start); } } } .collection-main { .banner__text { margin: 0; } .banner__content { @include flexbox(); @include justify-content(center); @include align-items(center); } } .collection__sort-by-filter { @include respond-to('small-up') { margin-left: 10px; } } .sub-collection-main main { min-height: 0; } /* #FAQ ================================================== */ .page-faq__column-wrap { width: 100%; } .column-wrapper { .faq:first-of-type { @include respond-to('medium-down') { margin-bottom: 20px; } } .faq-accordion { width: 100%; .image-element__wrap { padding: 0; &:first-child { margin-bottom: 20px; } } } .faq-title { margin-bottom: 10px; } .faq-title:not(:first-child) { margin-top: 40px; } } .accordion dt, .faq-accordion dt { border-bottom: 1px solid ; position: relative; a, button { background: none; border: 0; color: ; cursor: pointer; display: block; font-size: 1.2rem; padding: 20px 20px 20px 40px; text-align: left; width: 100%; transition: background-color 0.2s linear; } .accordion [aria-expanded="true"] small, .accordion-style--carets[aria-expanded="true"] .icon { transform: translateY(-60%) rotate(180deg); } small, .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); transition: transform 0.2s linear; } .accordion-style--plus_and_minus .icon { display: none; &.icon--active { display: block; } } } .accordion dt a[aria-expanded="true"], .accordion dt a:hover, .faq-accordion dt button[aria-expanded="true"], .faq-accordion dt button:hover { background-color: ; } .accordion dd, .faq-accordion dd { display: none; padding: 20px 20px 20px 40px; } // Content creator accordion .accordion dt:first-of-type { small, [aria-expanded="true"] small { transform: translateY(-60%) rotate(270deg); } [aria-expanded="false"] small { transform: translateY(-60%) rotate(360deg); } } .accordion dd { margin-left: 0; display: none; } .accordion dt a small.right { font-family: "Arial"; /* Force font family to ensure accordion carets are displayed on iOS devices */ } .accordion dd:first-of-type { display: block; } .accordion [aria-expanded="false"] small { transform: translateY(-60%) rotate(180deg); } .accordion [aria-expanded="true"] small { transform: translateY(-60%) rotate(270deg); } /* # Password page ================================================== */ #shopify-section-password-template { height: 100%; } #password-page-background { height: 100%; position: fixed; width: 100%; overflow: auto; } .password-page__newsletter { margin-top: 50px; .newsletter__title, .newsletter__text { color: inherit !important; // Inherit color of parent } p { margin-bottom: 20px; } .newsletter-section { width: 100%; } .newsletter__wrapper { max-width: 100%; } } .password-page__social-media { li { margin-right: 10px; .icon { height: 2rem; width: 2rem; } } } .modal-container__password { #password { width: 100%; } } #password-container { height: 100%; } .password-page { @include respond-to('large-down') { min-width: 350px; } @include respond-to('medium-down') { min-width: 90%; } .password-page-message { font-size: 3em; @include respond-to('medium-down') { font-size: 2em; } line-height: 1.2; padding: 12px 0; } .password-logo { max-width: 200px; margin: 0 auto; } .password-title { @include logo-text-style(); } .overlay { position: fixed; width: 100%; height: 100%; max-height: 100%; top: 0; left: 0; background: } .overlay-close { width: 150px; height: 50px; position: absolute; right: 10px; top: 10px; border: thin solid ; font-size: 14px; } .overlay-data { opacity: 0; visibility: hidden; } .overlay-open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } } .modal-close { background: 0 0; height: 40px; position: fixed; right: 20px; top: 20px; width: 40px; &:before, &:after { background-color: } } .storefront-password-form { padding-bottom: 30px; overflow: auto; color: ; } .storefront-password-form input#password { padding: 10px; margin: 20px 0; width: 100%; } .storefront-password-form label { font-size: 0.9em; margin: 0 0 1em 0; text-align: center; } .storefront-password-form .actions { display: inline-block; } .storefront-password-form #password { width: 50%; @include respond-to('small-down') { width: 100%; } display: inline-block; } .pro_rel_title{ margin-bottom:5px; } .tr_images_new{ display: flex; flex-wrap: wrap; } .new_img_tr_hold{ width: calc(100%/2); padding: 0 5px 5px; } .new_img_tr_hold img{ cursor: zoom-in; } #tr_image_zoom{ display:none; background-color:#fff; position: fixed; left: 0; top: 0; bottom: 0; right: 0; overflow: auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 10020; cursor: -webkit-zoom-out; cursor: zoom-out; } #tr_image_zoom img{ display:block; width:100%; } .tr-product-images__close-zoom{ position: fixed; top: 0; right: 1.5rem; } .tr_close_btn_zoom{ width: 5rem; height: 5rem; background-color:transparent !important; color:#000; cursor: pointer; -webkit-transition: 250ms; transition: 250ms; min-width: 1px; border: 0; } #mobile_view_tr{ display:none; } @media only screen and (max-width: 991.7px) { #desktop_view_tr .tr_half_half{ width:47% !important; } } @media only screen and (max-width: 797.7px) { #desktop_view_tr{ display:none; } #mobile_view_tr{ display:block; } } #owner { font-size: 0.9em; margin-top: -1em; opacity: 0.8; color: ; } .tr_scroll_none{ overflow: hidden; } /* # Font-Face ================================================== */ /* This is the proper syntax for an @font-face file. Upload your font files to Assets and then copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('FontName.eot'); src: url('FontName.eot?iefix') format('eot'), url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype'), url('FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */ /* # Custom Styles ================================================== */ .tr_sticky_proinfo{ position: sticky; top: 0; display: inline-block; height: 100%; } button.shopify-payment-button__more-options, .modal_price.subtitle .sold_out, .modal_price .sold_out.js-sold-out { display:none; } /*.swatch-element.color.soldout:after { position: absolute; top: 0; left: 6px; content: "X"; font-size: 50px; line-height: 39px; }*/ .soldout { opacity: 1; } .swatch .swatch-element.soldout label { opacity: 1; } .swatch .swatch-element.soldout label img.swatch__image { opacity: 0.6; } .swatch .color label { min-width: 44px; height: 44px !important; line-height: 44px; } .swatch-element.color { min-width: 50px; min-height: 50px; } .swatch .color label { min-width: 74px; height: 74px !important; line-height: 74px; } .swatch-element.color { min-width: 80px; min-height: 80px; } .product__classification-title{ display:none; } .product__type-list.tags .tag{ border:none; padding:0; } .field.is-stretched-width.mbtoneline { width: 49% !important; display: inline-block; min-width: 48% !important; margin-right: 1%; max-width: 49%; } .field.is-stretched-width.mbtoneline input { width: 100%; } .detail-three-col{ margin: 50px auto; } .set i{ display:none; } @media only screen and (max-width: 798px) { .set{ position: relative; width: 100%; height: auto; } .set > a{ display: block; padding: 6px 10px; text-decoration: none; border-bottom: 1px solid #ddd; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .set > a i{ float: right; display:block; margin-top: -15px; } .set p{ margin-bottom:0; } .set > a.active{ color: #fff; } .tr_content_foot{ background-color: #fff; border-bottom: 1px solid #ddd; display:none; padding: 10px 15px; } .image-with-text__image-column.has-image-crop { height: auto; } div#shopify-section-1580159243817 { margin-bottom: 30px; } #shopify-section-1578055618952.shopify-section.featured-promotions.jsFeaturedPromos, #shopify-section-1579296926596.shopify-section.image-with-text.image-with-text-1{ padding:0; } #shopify-section-1557099047693 .caption-content.text-align-center{ padding:10px; } } .mega-menu__block.block__mega-menu-1-0.block__menu ul li{ width: 45%; display: inline-block; } .table.is-bordered td, .table.is-bordered th { border: 2px solid #d3d3d3; padding: 9px; text-align: center; } .block__mega-menu-1-0 .mega-menu__linklist{ padding-left: 50px; padding-right: 50px; } #shopify-section-1578055618952 .flickity-slider { transform: translateX(0)!important; } #shopify-section-1579296926596 a{ border-bottom:0; } #shopify-section-1578055618952 .featured-promotions__block--has-link:hover .featured-promotions__content img { transform: scale(1); } .shop-the-look-action { margin-left: 0 !important; border: 0; width: 100%; color: #fff; line-height: 35px; margin-top: 10px; display: block; } .shop-the-look-action:hover { opacity:0.7; } .btnstlook{ display: block; margin: 10px 0; max-width: 50%; background: #000; padding: 10px; text-align: center; color: #fff; } .purchase-details .purchase-details__spb--false { height: auto; } .design-pre-order-template-wrapper button{ display: block; width: 100%; } .design-pre-order-template-wrapper [data-editable="pre-order-button"]{ display: block !important; max-width: 50%!important; padding: 10px 0 !important; } .purchase-details .purchase-details__buttons.purchase-details__spb--false .spurit-po-wrapper { display: block; } .js-product-form .btnstlook{ display:none; } @media only screen and (max-width: 991.78px) { .mega-menu__block.block__mega-menu-1-0.block__menu ul li{ width: 49%; display: inline-block; } } @media only screen and (max-width: 798.78px) { .mega-menu__block.block__mega-menu-1-0.block__menu ul li{ width: 100%; display: block; } } .container.tr_cont_mid{ align-items: center; margin-bottom:50px; } .tr_cont_mid .collection__description.tr_col_desc p{ max-width: 360px; font-size: 13px; margin: 0 auto; } .tr_flex_two img { width: 48%; margin: 0 1%; } a { color: #007ace; cursor: pointer; font-weight: bold; } .tag:not(body) { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; background-color: #dbdbdb; border-radius: 4px; color: #000; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex; font-size: 0.95rem; height: 2em; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; line-height: 1.5; padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; margin-bottom: 0.3em; transition: background-color 0.3s ease-in-out; }span.quick_shop.button.action_button.button--secondary.js-quick-shop-link { display: none; } .desktop_flex_only { display: flex !important; } @media only screen and (max-width: 768px) { .desktop_flex_only { display: none !important; } } .lookbook-title { margin-bottom: 1.5rem; } .lookbook-btn { min-width: 250px; } .lookbook-image { margin-bottom: 1.5rem !important; }