Created
July 24, 2015 19:59
-
-
Save jonathanmoore/7e16282c978ee81e92fe to your computer and use it in GitHub Desktop.
Replace the file in assets/district.scss.liquid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*============================================================================ | |
| District Theme v1.0.0 | |
| Copyright 2015 Style Hatch Inc. | |
| Author Jonathan Moore @moore | |
| Some things to know about this file: | |
| - Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself | |
| - The output CSS is compressed and comments are removed | |
| - You cannot use @imports in this file | |
| * Use grunt or gulp tasks to enable @imports - https://github.com/Shopify/shopify-css-import | |
| ==============================================================================*/ | |
| /*============================================================================ | |
| Table of Contents | |
| #General Variables | |
| #Typography Variables | |
| #Grid | |
| #Mixins | |
| #Bourbon - Partial Library Mixins | |
| #Normalize | |
| #Lists | |
| #Typography | |
| #Icons | |
| // Modules | |
| #Basic | |
| #Header Util | |
| #Header - Site Header | |
| #Hero Content | |
| #Featured Text | |
| #Featured Grid | |
| #Collections | |
| #Products | |
| #Cart | |
| #Instagram Collection | |
| #Page | |
| #Blog | |
| #RTE (rich text editor) | |
| #Social Share | |
| #Content Util / Breadcrumbs | |
| #Forms | |
| #Site Footer | |
| #Conditional Old IE Fixes | |
| // Vendors | |
| #Big Slide | |
| #Flickity | |
| #Magnific | |
| ==============================================================================*/ | |
| /*============================================================================ | |
| #General Variables | |
| ==============================================================================*/ | |
| // Primary colors | |
| $primaryTextColor: {{ settings.primary_text_color }}; | |
| $primaryTitleColor: {{ settings.primary_title_color }}; | |
| $primaryTitleTextTransform: {% if settings.typography_uppercase_titles %}uppercase{% else %}none{% endif %}; | |
| $primaryTitleTextWeight: 400; | |
| $primaryBackgroundColor: {{ settings.primary_background_color }}; | |
| $primaryAccentColor: {{ settings.primary_accent_color }}; | |
| // Dynamically detect the accent color's lightness | |
| // set the value to black or white for text on top | |
| @function set-text-on-accent-color($color) { | |
| @if (lightness($color) > 60) { | |
| @return #000000; // Lighter backgorund, return dark color | |
| } @else { | |
| @return #ffffff; // Darker background, return light color | |
| } | |
| } | |
| $primaryTextOnAccentColor: set-text-on-accent-color($primaryAccentColor); | |
| $primaryHoverColor: darken($primaryAccentColor, 15%); | |
| $primaryImageLabelColor: $primaryBackgroundColor; | |
| $primaryImageLabelAccentColor: $primaryAccentColor; | |
| $primaryImageLabelTextColor: $primaryTextColor; | |
| $contentBoxBackgroundColor: {{ settings.content_box_background_color }}; | |
| // Outer border & util nav | |
| $siteBorderColor: {{ settings.site_border_color }}; | |
| $siteBorderTextColor: {{ settings.site_border_text_color }}; | |
| // Site header & nav | |
| $siteHeaderTitleTextColor: {{ settings.site_header_title_text_color }}; | |
| $siteHeaderNavTextColor: {{ settings.site_header_nav_text_color }}; | |
| $siteHeaderBackgroundColor: {{ settings.site_header_background_color }}; | |
| $siteHeaderAccentColor: {{ settings.site_header_accent_color }}; | |
| $siteHeaderTitleTextWeight: 600; | |
| $siteHeaderTitleTextTransform: {% if settings.typography_uppercase_titles %}uppercase{% else %}none{% endif %}; | |
| $siteHeaderNavTextWeight: 600; | |
| $siteHeaderNavTextTransform: uppercase; | |
| $siteHeaderFullWidth: false; | |
| // Offer banner | |
| $offerBannerBackgroundColor: {{ settings.offer_banner_background_color }}; | |
| $offerBannerTextColor: {{ settings.offer_banner_text_color }}; | |
| $offerBannerAccentColor: {{ settings.offer_banner_accent_color }}; | |
| $offerBannerTextOnAccentColor: set-text-on-accent-color($offerBannerAccentColor); | |
| // Home Hero | |
| $homeHeroBackgroundColor: {{ settings.homepage_hero_background_color }}; | |
| $homeHeroFullWidth: {{ settings.homepage_hero_full_width }}; | |
| // Home Featured Text | |
| $homeFeaturedTextColor: $primaryTextColor; | |
| $homeFeaturedTitleColor: $primaryTitleColor; | |
| $homeFeaturedBackgroundColor: $primaryBackgroundColor; | |
| $homeFeaturedFullWidth: false; | |
| // Home Featured Collections | |
| $homeFeaturedCollectionsFadeLabel: true; | |
| $homeFeaturedCollectionsFullWidth: false; | |
| $productCollectionBackgroundColor: $primaryBackgroundColor; | |
| $productCollectionFullWidth: false; | |
| $productBackgroundColor: $primaryBackgroundColor; | |
| $productFullWidth: false; | |
| $genericFullWidth: true; | |
| $blogAsideAlign: right; | |
| $blogFullWidth: false; | |
| $blogBackgroundColor: $primaryBackgroundColor; | |
| $blogTitleTextWeight: 600; | |
| // Product Page | |
| $productPhotoAlign: left; | |
| {% if settings.product_thumbnails_placement == 'side' %} | |
| $productPhotoThumbnailsSide: true; | |
| {% else %} | |
| $productPhotoThumbnailsSide: false; | |
| {% endif %} | |
| $footerFullWidth: false; | |
| $footerBackgroundColor: {{ settings.footer_background_color }}; | |
| $footerTitleTextColor: {{ settings.footer_title_text_color }}; | |
| $footerNavTextColor: {{ settings.footer_title_accent_color }}; | |
| $footerTextColor: mix($footerTitleTextColor, $footerBackgroundColor, 80%); | |
| $footerTextAlignment: center; | |
| // ================================================== | |
| // Element Vertical Padding | |
| // Adjust the amount of space above and below the various elements on the page | |
| // Set the value to the amount of pixels above and below each item | |
| // ================================================== | |
| // Header | |
| // Original 50px / 20px | |
| $siteLogoPaddingTop: 40px; | |
| $siteLogoPaddingBottom: 10px; | |
| // Navigation | |
| // Original 40px | |
| $siteNavigationMarginBottom: 0px; | |
| // Homepage, Collection and Product Container/Sections Padding | |
| // Original 60px | |
| $sectionPadding: 40px; | |
| // Product Collection | |
| // Original 20px / 30px | |
| $productCollectionPaddingTop: 10px; | |
| $productCollectionHeaderMarginBottom: 20px; | |
| // Product Page | |
| // Original 30px | |
| $productHeaderMarginBottom: 20px; | |
| // Breadcrumb / Social Header | |
| // Original 30px | |
| $breadcrumbPaddingBottom: 20px; | |
| // ================================================== | |
| // Media Queries | |
| // ================================================== | |
| // // Supports | |
| // @media min-width | |
| // @media max-width | |
| // @media min-width and max-width | |
| $viewport-increment: 0.1px; // customize to suite | |
| // Desktop | |
| $desktop: 1000px; // customize to suite | |
| $pre-desktop: $desktop - $viewport-increment; | |
| // Tablet | |
| $tablet: 800px; // customize to suite | |
| $pre-tablet: $tablet - $viewport-increment; | |
| // Palm | |
| $largeMobile: 700px; // customize to suite | |
| $pre-largeMobile: $largeMobile - $viewport-increment; | |
| // Palm | |
| $mobile: 600px; // customize to suite | |
| $pre-mobile: $mobile - $viewport-increment; | |
| // Palm | |
| $small: 440px; // customize to suite | |
| $post-small: $small + $viewport-increment; | |
| // Constraints | |
| $min: min-width; | |
| $max: max-width; | |
| /*============================================================================ | |
| #Typography Variables | |
| ==============================================================================*/ | |
| // Custom Fonts | |
| {% if settings.typography_custom_fonts_enabled %} | |
| {% assign custom_fonts_title = settings.typography_custom_fonts_title | strip %} | |
| {% assign custom_fonts_body = settings.typography_custom_fonts_body | strip %} | |
| {% assign custom_fonts_nav = settings.typography_custom_fonts_nav | strip %} | |
| $headerFontStack: {% if custom_fonts_title != '' %}{{ custom_fonts_title }}{% else %}sans-serif{% endif %}; | |
| $headerFontWeight: 600; | |
| $navFontStack: {% if custom_fonts_nav != '' %}{{ custom_fonts_nav }}{% else %}sans-serif{% endif %}; | |
| $bodyFontStack: {% if custom_fonts_body != '' %}{{ custom_fonts_body }}{% else %}sans-serif{% endif %}; | |
| $logoFontStack: $headerFontStack; | |
| // Preset recommended fonts | |
| {% else %} | |
| {% assign font_combo = settings.typography_recommended_combinations %} | |
| {% if font_combo == 'open-sans-montserrat' %} | |
| $headerFontStack: 'Open Sans Condensed', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $headerFontWeight: 300; | |
| $navFontStack: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $logoFontStack: $navFontStack; | |
| {% elsif font_combo == 'ptserif-lato' %} | |
| $headerFontStack: 'PT Serif', serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'PT Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'PT Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $logoFontStack: $headerFontStack; | |
| {% elsif font_combo == 'volkhov-merriweather' %} | |
| $headerFontStack: 'Volkhov', serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'Merriweather', serif; | |
| $bodyFontStack: 'Merriweather', serif; | |
| $logoFontStack: $navFontStack; | |
| {% elsif font_combo == 'merriweather-open-sans' %} | |
| $headerFontStack: 'Merriweather', serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $logoFontStack: $navFontStack; | |
| {% elsif font_combo == 'open-sans-pt-serif' %} | |
| $headerFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'PT Serif', serif; | |
| $logoFontStack: $navFontStack; | |
| {% elsif font_combo == 'lora-montserrat' %} | |
| $headerFontStack: 'Lora', serif; | |
| $headerFontWeight: 300; | |
| $navFontStack: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'Lora', serif; | |
| $logoFontStack: $bodyFontStack; | |
| {% elsif font_combo == 'open-sans' %} | |
| $headerFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $logoFontStack: $navFontStack; | |
| {% elsif font_combo == 'lato' %} | |
| $headerFontStack: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $logoFontStack: $navFontStack; | |
| {% elsif font_combo == 'raleway' %} | |
| $headerFontStack: 'Raleway', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'Raleway', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $bodyFontStack: 'Raleway', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $logoFontStack: $navFontStack; | |
| {% elsif font_combo == 'lora-merriweather' %} | |
| $headerFontStack: 'Lora', serif; | |
| $headerFontWeight: 600; | |
| $navFontStack: 'Lora', serif; | |
| $bodyFontStack: 'Lora', serif; | |
| $logoFontStack: $navFontStack; | |
| {% endif %} | |
| {% endif %} | |
| $baseFontSize: 16px; // Henseforth known as 1em | |
| @function em($target, $context: $baseFontSize) { | |
| @return ($target / $context) * 1em; | |
| } | |
| /*============================================================================ | |
| #Grid | |
| - Simple grid mixins | |
| - grid() on parent container with options to display gutterless or in reverse | |
| - grid-item() span 1-12 ($gridColumns) | |
| ==============================================================================*/ | |
| $gridGutter: 30px; | |
| $gridColumns: 12; | |
| $maxWidth: 100%; | |
| // Sizing variables | |
| $siteWidth: em(1180px); | |
| $gutter: em(30px); | |
| /*================ Outer Container ================*/ | |
| @mixin outer-container($width: $maxWidth) { | |
| @include clearfix; | |
| max-width: $width; | |
| margin: { | |
| left: auto; | |
| right: auto; | |
| } | |
| } | |
| @mixin grid($gutterless: false, $reverse: false) { | |
| @include clearfix(); | |
| margin: 0; | |
| padding: 0; | |
| font-size: 0; | |
| @if $gutterless == false { | |
| margin-left: -$gridGutter; | |
| &>* { | |
| padding-left: $gridGutter; | |
| } | |
| } | |
| @if $reverse == true { | |
| direction: rtl; | |
| // text-align: left; | |
| &>* { | |
| direction: ltr; | |
| text-align: left; | |
| display: inline-block; | |
| } | |
| } @else { | |
| direction: ltr; | |
| &>* { | |
| display: inline-block; | |
| } | |
| } | |
| link { | |
| display: none; | |
| } | |
| } | |
| @mixin grid-item($columns: $gridColumns) { | |
| @include box-sizing(border-box); | |
| font-size: $baseFontSize; | |
| min-height: 1px; | |
| vertical-align: top; | |
| width: ($columns / $gridColumns) * 100%; | |
| } | |
| /*============================================================================ | |
| #Mixins | |
| ==============================================================================*/ | |
| // ================================================== | |
| // $Media Query @Mixin | |
| // http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/ | |
| // ================================================== | |
| @mixin mediaQuery($constraint, $viewport1, $viewport2: null) { | |
| @if $constraint == $min { | |
| @media screen and ($min: $viewport1) { | |
| @content; | |
| } | |
| } @else if $constraint == $max { | |
| @media screen and ($max: $viewport1) { | |
| @content; | |
| } | |
| } @else { | |
| @media screen and ($min: $viewport1) and ($max: $viewport2) { | |
| @content; | |
| } | |
| } | |
| } | |
| @mixin buttonOutline(){ | |
| padding: 2px 12px; | |
| border: 2px solid $primaryTextColor; | |
| color: $primaryTextColor; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| font-size: em(11px); | |
| text-decoration: none; | |
| @include transition(all 0.1s ease-in-out); | |
| outline: none; | |
| &:hover, | |
| &:focus { | |
| color: $primaryAccentColor; | |
| border-color: $primaryAccentColor; | |
| } | |
| } | |
| // The clearfix mixin provides an easy way to contain floats | |
| @mixin clearfix { | |
| &:after { | |
| clear: both; | |
| content: ""; | |
| display: table; | |
| } | |
| *zoom: 1; | |
| } | |
| .clearfix { | |
| &:after { | |
| clear: both; | |
| content: ""; | |
| display: table; | |
| } | |
| *zoom: 1; | |
| } | |
| /*============================================================================ | |
| #Bourbon - Partial Library Mixins | |
| ==============================================================================*/ | |
| @mixin appearance ($value) { | |
| @include prefixer(appearance, $value, webkit, moz, ms, o); | |
| } | |
| @mixin box-sizing ($box) { | |
| // content-box | border-box | inherit | |
| @include prefixer(box-sizing, $box); | |
| } | |
| @mixin linear-gradient($angle, $color-stops...) { | |
| $_angle-with-vendor-prefix: ""; | |
| $_angle: ""; | |
| @if $angle == "to top" or $angle == "bottom" { | |
| $_angle-with-vendor-prefix: bottom; | |
| $_angle: to top; | |
| } @else if $angle == "to right" or $angle == "left" { | |
| $_angle-with-vendor-prefix: left; | |
| $_angle: to right; | |
| } @else if $angle == "to bottom" or $angle == "top" { | |
| $_angle-with-vendor-prefix: top; | |
| $_angle: to bottom; | |
| } @else if $angle == "to left" or $angle == "right" { | |
| $_angle-with-vendor-prefix: right; | |
| $_angle: to left; | |
| } @else if $angle == "to top right" or $angle == "bottom left" { | |
| $_angle-with-vendor-prefix: bottom left; | |
| $_angle: to top right; | |
| } @else if $angle == "to bottom right" or $angle == "top left" { | |
| $_angle-with-vendor-prefix: top left; | |
| $_angle: to bottom right; | |
| } @else if $angle == "to bottom left" or $angle == "top right" { | |
| $_angle-with-vendor-prefix: top right; | |
| $_angle: to bottom left; | |
| } @else if $angle == "to top left" or $angle == "bottom right" { | |
| $_angle-with-vendor-prefix: bottom right; | |
| $_angle: to top left; | |
| } @else { | |
| $_angle-with-vendor-prefix: $angle % 360; | |
| $_angle: (90 - $angle) % 360; | |
| } | |
| background: -webkit-linear-gradient($_angle-with-vendor-prefix, $color-stops); | |
| background: -moz-linear-gradient($_angle-with-vendor-prefix, $color-stops); | |
| background: -o-linear-gradient($_angle-with-vendor-prefix, $color-stops); | |
| background: linear-gradient($_angle, $color-stops); | |
| } | |
| @mixin transform($property: none) { | |
| // none | <transform-function> | |
| @include prefixer(transform, $property, webkit, moz, ms, o); | |
| } | |
| @mixin transform-origin($axes: 50%) { | |
| // x-axis - left | center | right | length | % | |
| // y-axis - top | center | bottom | length | % | |
| // z-axis - length | |
| @include prefixer(transform-origin, $axes, webkit, moz, ms, o); | |
| } | |
| @mixin transition ($properties...) { | |
| // Fix for vendor-prefix transform property | |
| $needs-prefixes: false; | |
| $webkit: (); | |
| $moz: (); | |
| $spec: (); | |
| // Create lists for vendor-prefixed transform | |
| @each $list in $properties { | |
| @if nth($list, 1) == "transform" { | |
| $needs-prefixes: true; | |
| $list1: -webkit-transform; | |
| $list2: -moz-transform; | |
| $list3: (); | |
| @each $var in $list { | |
| $list3: join($list3, $var); | |
| @if $var != "transform" { | |
| $list1: join($list1, $var); | |
| $list2: join($list2, $var); | |
| } | |
| } | |
| $webkit: append($webkit, $list1); | |
| $moz: append($moz, $list2); | |
| $spec: append($spec, $list3); | |
| } | |
| // Create lists for non-prefixed transition properties | |
| @else { | |
| $webkit: append($webkit, $list, comma); | |
| $moz: append($moz, $list, comma); | |
| $spec: append($spec, $list, comma); | |
| } | |
| } | |
| @if $needs-prefixes { | |
| -webkit-transition: $webkit; | |
| -moz-transition: $moz; | |
| transition: $spec; | |
| } | |
| @else { | |
| @if length($properties) >= 1 { | |
| @include prefixer(transition, $properties, webkit moz spec); | |
| } | |
| @else { | |
| $properties: all 0.15s ease-out 0s; | |
| @include prefixer(transition, $properties, webkit moz spec); | |
| } | |
| } | |
| } | |
| @mixin transition-property ($properties...) { | |
| -webkit-transition-property: transition-property-names($properties, 'webkit'); | |
| -moz-transition-property: transition-property-names($properties, 'moz'); | |
| transition-property: transition-property-names($properties, false); | |
| } | |
| @mixin transition-duration ($times...) { | |
| @include prefixer(transition-duration, $times, webkit moz spec); | |
| } | |
| @mixin transition-timing-function ($motions...) { | |
| // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | |
| @include prefixer(transition-timing-function, $motions, webkit moz spec); | |
| } | |
| @mixin transition-delay ($times...) { | |
| @include prefixer(transition-delay, $times, webkit moz spec); | |
| } | |
| @mixin user-select($arg: none) { | |
| @include prefixer(user-select, $arg, webkit, moz, ms); | |
| } | |
| // Addons & other mixins | |
| @mixin hide-text { | |
| background-color: transparent; | |
| border: 0; | |
| color: transparent; | |
| font: 0/0 a; | |
| text-shadow: none; | |
| } | |
| @mixin placeholder { | |
| $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; | |
| @each $placeholder in $placeholders { | |
| &:#{$placeholder}-placeholder { | |
| @content; | |
| } | |
| } | |
| } | |
| @mixin word-wrap() { | |
| word-break: break-word; | |
| -webkit-hyphens: auto; | |
| -moz-hyphens: auto; | |
| hyphens: auto; | |
| } | |
| @mixin no-word-wrap() { | |
| word-break: normal; | |
| -webkit-hyphens: none; | |
| -moz-hyphens: none; | |
| hyphens: none; | |
| } | |
| //************************************************************************// | |
| // Generate a variable ($all-text-inputs) with a list of all html5 | |
| // input types that have a text-based input, excluding textarea. | |
| // http://diveintohtml5.org/forms.html | |
| //************************************************************************// | |
| $inputs-list: 'input[type="email"]', | |
| 'input[type="number"]', | |
| 'input[type="password"]', | |
| 'input[type="search"]', | |
| 'input[type="tel"]', | |
| 'input[type="text"]', | |
| 'input[type="url"]', | |
| // Webkit & Gecko may change the display of these in the future | |
| 'input[type="color"]', | |
| 'input[type="date"]', | |
| 'input[type="datetime"]', | |
| 'input[type="datetime-local"]', | |
| 'input[type="month"]', | |
| 'input[type="time"]', | |
| 'input[type="week"]'; | |
| $unquoted-inputs-list: (); | |
| @each $input-type in $inputs-list { | |
| $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); | |
| } | |
| $all-text-inputs: $unquoted-inputs-list; | |
| // You must use interpolation on the variable: | |
| // #{$all-text-inputs} | |
| //************************************************************************// | |
| // #{$all-text-inputs}, textarea { | |
| // border: 1px solid red; | |
| // } | |
| @mixin position ($position: relative, $coordinates: 0 0 0 0) { | |
| @if type-of($position) == list { | |
| $coordinates: $position; | |
| $position: relative; | |
| } | |
| $top: nth($coordinates, 1); | |
| $right: nth($coordinates, 2); | |
| $bottom: nth($coordinates, 3); | |
| $left: nth($coordinates, 4); | |
| position: $position; | |
| @if $top == auto { | |
| top: $top; | |
| } | |
| @else if not(unitless($top)) { | |
| top: $top; | |
| } | |
| @if $right == auto { | |
| right: $right; | |
| } | |
| @else if not(unitless($right)) { | |
| right: $right; | |
| } | |
| @if $bottom == auto { | |
| bottom: $bottom; | |
| } | |
| @else if not(unitless($bottom)) { | |
| bottom: $bottom; | |
| } | |
| @if $left == auto { | |
| left: $left; | |
| } | |
| @else if not(unitless($left)) { | |
| left: $left; | |
| } | |
| } | |
| //************************************************************************// | |
| // Default: Webkit, moz, spec | |
| // Example: @include prefixer(border-radius, $radii, $o: true); | |
| //************************************************************************// | |
| @mixin prefixer ($property, $value, | |
| $webkit: true, | |
| $moz: true, | |
| $ms: false, | |
| $o: false, | |
| $spec: true) { | |
| @if $webkit { -webkit-#{$property}: $value; } | |
| @if $moz { -moz-#{$property}: $value; } | |
| @if $ms { -ms-#{$property}: $value; } | |
| @if $o { -o-#{$property}: $value; } | |
| @if $spec { #{$property}: $value; } | |
| } | |
| // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) | |
| // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html | |
| // EASE IN | |
| $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); | |
| $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
| $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); | |
| $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
| $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); | |
| $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); | |
| $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); | |
| $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); | |
| // EASE OUT | |
| $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); | |
| $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
| $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); | |
| $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
| $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); | |
| $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); | |
| $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); | |
| $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); | |
| // EASE IN OUT | |
| $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); | |
| $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); | |
| $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); | |
| $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); | |
| $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); | |
| $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); | |
| $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); | |
| $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); | |
| /*============================================================================ | |
| #Normalize | |
| ==============================================================================*/ | |
| // ============================================================================= | |
| // Normalize.scss based on Nicolas Gallagher and Jonathan Neal's | |
| // normalize.css v2.1.3 | MIT License | git.io/normalize | |
| // ============================================================================= | |
| // ============================================================================= | |
| // Normalize.scss settings | |
| // ============================================================================= | |
| // Set to true if you want to add support for IE6 and IE7 | |
| // Notice: setting to true might render some elements | |
| // slightly differently than when set to false | |
| $legacy_support_for_ie: false !default; // Used also in Compass | |
| // Set the default font family here so you don't have to override it later | |
| $normalized_font_family: sans-serif !default; | |
| $normalize_headings: true !default; | |
| $h1_font_size: 2em !default; | |
| $h2_font_size: 1.5em !default; | |
| $h3_font_size: 1.17em !default; | |
| $h4_font_size: 1em !default; | |
| $h5_font_size: 0.83em !default; | |
| $h6_font_size: 0.75em !default; | |
| $h1_margin: 0.67em 0 !default; | |
| $h2_margin: 0.83em 0 !default; | |
| $h3_margin: 1em 0 !default; | |
| $h4_margin: 1.33em 0 !default; | |
| $h5_margin: 1.67em 0 !default; | |
| $h6_margin: 2.33em 0 !default; | |
| $background: #fff !default; | |
| $color: #000 !default; | |
| // ============================================================================= | |
| // HTML5 display definitions | |
| // ============================================================================= | |
| // Corrects block display not defined in IE6/7/8/9 & FF3 | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| // Corrects inline-block display not defined in IE6/7/8/9 & FF3 | |
| audio, | |
| canvas, | |
| video { | |
| display: inline-block; | |
| @if $legacy_support_for_ie { | |
| *display: inline; | |
| *zoom: 1; | |
| } | |
| } | |
| // 1. Prevents modern browsers from displaying 'audio' without controls | |
| // 2. Remove excess height in iOS5 devices | |
| audio:not([controls]) { | |
| display: none; // 1 | |
| height: 0; // 2 | |
| } | |
| // | |
| // Address `[hidden]` styling not present in IE 8/9. | |
| // Hide the `template` element in IE, Safari, and Firefox < 22. | |
| // | |
| [hidden], template { | |
| display: none; | |
| } | |
| // ============================================================================= | |
| // Base | |
| // ============================================================================= | |
| // 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units | |
| // http://clagnut.com/blog/348/#c790 | |
| // 2. Prevents iOS text size adjust after orientation change, without disabling user zoom | |
| // www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ | |
| html { | |
| @if $legacy_support_for_ie { | |
| font-size: 100%; // 1 | |
| } | |
| background: $background; | |
| color: $color; | |
| -webkit-text-size-adjust: 100%; // 2 | |
| -ms-text-size-adjust: 100%; // 2 | |
| } | |
| // Addresses font-family inconsistency between 'textarea' and other form elements. | |
| html, | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: $normalized_font_family; | |
| } | |
| // Addresses margins handled incorrectly in IE6/7 | |
| body { | |
| margin: 0; | |
| } | |
| // ============================================================================= | |
| // Links | |
| // ============================================================================= | |
| // 1. Remove the gray background color from active links in IE 10. | |
| // 2. Addresses outline displayed oddly in Chrome | |
| // 3. Improves readability when focused and also mouse hovered in all browsers | |
| // people.opera.com/patrickl/experiments/keyboard/test | |
| a { | |
| // 1 | |
| background: transparent; | |
| // 3 | |
| &:focus { | |
| outline-color: $primaryAccentColor; | |
| } | |
| &:hover, | |
| &:active { | |
| outline: 0; | |
| } | |
| } | |
| // ============================================================================= | |
| // Typography | |
| // ============================================================================= | |
| // Addresses font sizes and margins set differently in IE6/7 | |
| // Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 | |
| @if $normalize_headings == true { | |
| h1 { | |
| font-size: $h1_font_size; | |
| margin: $h1_margin; | |
| } | |
| h2 { | |
| font-size: $h2_font_size; | |
| margin: $h2_margin; | |
| } | |
| h3 { | |
| font-size: $h3_font_size; | |
| margin: $h3_margin; | |
| } | |
| h4 { | |
| font-size: $h4_font_size; | |
| margin: $h4_margin; | |
| } | |
| h5 { | |
| font-size: $h5_font_size; | |
| margin: $h5_margin; | |
| } | |
| h6 { | |
| font-size: $h6_font_size; | |
| margin: $h6_margin; | |
| } | |
| } | |
| // Addresses styling not present in IE 8/9, S5, Chrome | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| // Addresses style set to 'bolder' in FF3+, S4/5, Chrome | |
| b, | |
| strong { | |
| font-weight: bold; | |
| } | |
| @if $legacy_support_for_ie { | |
| blockquote { | |
| margin: 1em 40px; | |
| } | |
| } | |
| // Addresses styling not present in S5, Chrome | |
| dfn { | |
| font-style: italic; | |
| } | |
| // Addresses styling not present in IE6/7/8/9 | |
| mark { | |
| background: #ff0; | |
| color: #000; | |
| } | |
| // Addresses margins set differently in IE6/7 | |
| @if $legacy_support_for_ie { | |
| p, | |
| pre { | |
| margin: 1em 0; | |
| } | |
| } | |
| // Corrects font family set oddly in IE6, S4/5, Chrome | |
| // en.wikipedia.org/wiki/User:Davidgothberg/Test59 | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, serif; | |
| @if $legacy_support_for_ie { | |
| _font-family: 'courier new', monospace; | |
| } | |
| font-size: 1em; | |
| } | |
| // Improves readability of pre-formatted text in all browsers | |
| pre { | |
| white-space: pre; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| // Set consistent quote types. | |
| q { | |
| quotes: "\201C" "\201D" "\2018" "\2019"; | |
| } | |
| // 1. Addresses CSS quotes not supported in IE6/7 | |
| // 2. Addresses quote property not supported in S4 | |
| // 1 | |
| @if $legacy_support_for_ie { | |
| q { | |
| quotes: none; | |
| } | |
| } | |
| // 2 | |
| q { | |
| &:before, | |
| &:after { | |
| content: ''; | |
| content: none; | |
| } | |
| } | |
| // Address inconsistent and variable font size in all browsers. | |
| small { | |
| font-size: 80%; | |
| } | |
| // Prevents sub and sup affecting line-height in all browsers | |
| // gist.github.com/413930 | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| // ============================================================================= | |
| // Lists | |
| // ============================================================================= | |
| // Addresses margins set differently in IE6/7 | |
| @if $legacy_support_for_ie { | |
| dl, | |
| menu, | |
| ol, | |
| ul { | |
| margin: 1em 0; | |
| } | |
| } | |
| @if $legacy_support_for_ie { | |
| dd { | |
| margin: 0 0 0 40px; | |
| } | |
| } | |
| // Addresses paddings set differently in IE6/7 | |
| @if $legacy_support_for_ie { | |
| menu, | |
| ol, | |
| ul { | |
| padding: 0 0 0 40px; | |
| } | |
| } | |
| // Corrects list images handled incorrectly in IE7 | |
| nav { | |
| ul, | |
| ol { | |
| @if $legacy_support_for_ie { | |
| list-style-image: none; | |
| } | |
| } | |
| } | |
| // ============================================================================= | |
| // Embedded content | |
| // ============================================================================= | |
| // 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 | |
| // 2. Improves image quality when scaled in IE7 | |
| // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| border: 0; // 1 | |
| @if $legacy_support_for_ie { | |
| -ms-interpolation-mode: bicubic; // 2 | |
| } | |
| } | |
| // Corrects overflow displayed oddly in IE9 | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| // ============================================================================= | |
| // Figures | |
| // ============================================================================= | |
| // Addresses margin not present in IE6/7/8/9, S5, O11 | |
| figure { | |
| margin: 0; | |
| } | |
| // ============================================================================= | |
| // Forms | |
| // ============================================================================= | |
| // Corrects margin displayed oddly in IE6/7 | |
| @if $legacy_support_for_ie { | |
| form { | |
| margin: 0; | |
| } | |
| } | |
| // Define consistent border, margin, and padding | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| // 1. Corrects color not being inherited in IE6/7/8/9 | |
| // 2. Remove padding so people aren't caught out if they zero out fieldsets. | |
| // 3. Corrects text not wrapping in FF3 | |
| // 4. Corrects alignment displayed oddly in IE6/7 | |
| legend { | |
| border: 0; // 1 | |
| padding: 0; // 2 | |
| white-space: normal; // 3 | |
| @if $legacy_support_for_ie { | |
| *margin-left: -7px; // 4 | |
| } | |
| } | |
| // 1. Correct font family not being inherited in all browsers. | |
| // 2. Corrects font size not being inherited in all browsers | |
| // 3. Addresses margins set differently in IE6/7, FF3+, S5, Chrome | |
| // 4. Improves appearance and consistency in all browsers | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: inherit; // 1 | |
| font-size: 100%; // 2 | |
| margin: 0; // 3 | |
| vertical-align: baseline; // 4 | |
| @if $legacy_support_for_ie { | |
| *vertical-align: middle; // 4 | |
| } | |
| } | |
| // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet | |
| button, input { | |
| line-height: normal; | |
| } | |
| // Address inconsistent `text-transform` inheritance for `button` and `select`. | |
| // All other form control elements do not inherit `text-transform` values. | |
| // Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. | |
| // Correct `select` style inheritance in Firefox 4+ and Opera. | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
| // and `video` controls | |
| // 2. Corrects inability to style clickable 'input' types in iOS | |
| // 3. Improves usability and consistency of cursor style between image-type | |
| // 'input' and others | |
| // 4. Removes inner spacing in IE7 without affecting normal text inputs | |
| // Known issue: inner spacing remains in IE6 | |
| button, | |
| html input[type="button"], // 1 | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; // 2 | |
| cursor: pointer; // 3 | |
| @if $legacy_support_for_ie { | |
| *overflow: visible; // 4 | |
| } | |
| } | |
| // Re-set default cursor for disabled elements | |
| button[disabled], | |
| input[disabled] { | |
| cursor: default; | |
| } | |
| // Removes inner padding and border in FF3+ | |
| // www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ | |
| button, input { | |
| &::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| } | |
| button, | |
| input { | |
| border-radius: 0px; | |
| } | |
| select::-ms-expand { | |
| display: none; | |
| } | |
| // 1. Removes default vertical scrollbar in IE6/7/8/9 | |
| // 2. Improves readability and alignment in all browsers | |
| textarea { | |
| overflow: auto; // 1 | |
| vertical-align: top; // 2 | |
| } | |
| // ============================================================================= | |
| // Tables | |
| // ============================================================================= | |
| // Remove most spacing between table cells | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| input { | |
| // 1. Addresses appearance set to searchfield in S5, Chrome | |
| // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) | |
| &[type="search"] { | |
| -webkit-appearance: textfield; // 1 | |
| // -moz-box-sizing: content-box; | |
| // -webkit-box-sizing: content-box; // 2 | |
| // box-sizing: content-box; | |
| @include box-sizing(border-box); | |
| // Remove inner padding and search cancel button in Safari 5 and Chrome | |
| // on OS X. | |
| &::-webkit-search-cancel-button, | |
| &::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| border-radius: 0px; | |
| -webkit-appearance: none; | |
| } | |
| // 1. Address box sizing set to `content-box` in IE 8/9/10. | |
| // 2. Remove excess padding in IE 8/9/10. | |
| // 3. Removes excess padding in IE7 | |
| // Known issue: excess padding remains in IE6 | |
| &[type="checkbox"], | |
| &[type="radio"] { | |
| // box-sizing: border-box; // 1 | |
| @include box-sizing(border-box); | |
| padding: 0; // 2 | |
| @if $legacy_support_for_ie { | |
| *height: 13px; // 3 | |
| *width: 13px; // 3 | |
| } | |
| } | |
| // -webkit-appearance: none; | |
| // -webkit-border-radius:0; | |
| // border-radius:0; | |
| } | |
| /*============================================================================ | |
| #Lists | |
| ==============================================================================*/ | |
| ul, | |
| ol { | |
| margin: 0; | |
| padding: 0; | |
| list-style-type: none; | |
| &%default-ul { | |
| list-style-type: disc; | |
| margin-bottom: $gutter / 2; | |
| padding-left: $gutter; | |
| } | |
| &%default-ol { | |
| list-style-type: decimal; | |
| margin-bottom: $gutter / 2; | |
| padding-left: $gutter; | |
| } | |
| } | |
| dl { | |
| margin-bottom: $gutter / 2; | |
| dt { | |
| font-weight: bold; | |
| margin-top: $gutter / 2; | |
| } | |
| dd { | |
| margin: 0; | |
| } | |
| } | |
| /*============================================================================ | |
| #Typography | |
| ==============================================================================*/ | |
| body, | |
| input, | |
| textarea, | |
| button, | |
| select { | |
| font-size: $baseFontSize; | |
| line-height: 1.6; | |
| font-family: $bodyFontStack; | |
| color: $primaryTextColor; | |
| font-weight: 400; | |
| -webkit-font-smoothing: antialiased; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| select { | |
| @include appearance(none); | |
| background-color: transparent; | |
| background-image: url('{{ "ico-select.svg" | asset_url }}'); | |
| background-position: right 10px center; | |
| background-repeat: no-repeat; | |
| padding: 0 28px 0 10px; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| display: block; | |
| font-family: $headerFontStack; | |
| font-weight: $headerFontWeight; | |
| margin: 0 0 0.5em; | |
| line-height: 1.4; | |
| color: $primaryTitleColor; | |
| a { | |
| text-decoration: none; | |
| font-weight: inherit; | |
| } | |
| } | |
| * { | |
| @include word-wrap(); | |
| } | |
| /*================ Use em() Sass function to declare font-size ================*/ | |
| h1 { | |
| font-size: em(36px); | |
| } | |
| h2 { | |
| font-size: em(28px); | |
| } | |
| h3 { | |
| font-size: em(22px); | |
| } | |
| h4 { | |
| font-size: em(20px); | |
| } | |
| h5 { | |
| font-size: em(16px); | |
| } | |
| h6 { | |
| font-size: em(14px); | |
| } | |
| .h1 { @extend h1; } | |
| .h2 { @extend h2; } | |
| .h3 { @extend h3; } | |
| .h4 { @extend h4; } | |
| .h5 { @extend h5; } | |
| .h6 { @extend h6; } | |
| p { | |
| margin: 0 0 ($gutter / 2) 0; | |
| img { | |
| margin: 0; | |
| } | |
| } | |
| a { | |
| color: $primaryAccentColor; | |
| &:hover, | |
| &:focus { | |
| color: $primaryHoverColor; | |
| } | |
| } | |
| em { | |
| font-style: italic; | |
| } | |
| b, strong { | |
| font-weight: bold; | |
| } | |
| small { | |
| font-size: 0.9em; | |
| } | |
| sup, sub { | |
| position: relative; | |
| font-size: 60%; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.5em; | |
| } | |
| /*============================================================================ | |
| #Icons | |
| ==============================================================================*/ | |
| /*================ ICONS ================*/ | |
| span.icon-fallback-text, | |
| button.icon-fallback-text, | |
| span.icon-text, | |
| button.icon-text, { | |
| span.icon { | |
| position: relative; | |
| top: 2px; | |
| display: inline-block; | |
| } | |
| span.fallback-text { | |
| display: none; | |
| } | |
| } | |
| @font-face { | |
| font-family: 'ficon'; | |
| src:url('{{ "ficon.eot" | asset_url }}'); | |
| src:url('{{ "ficon.eot" | asset_url }}#iefix') format('embedded-opentype'), | |
| url('{{ "ficon.woff" | asset_url }}') format('woff'), | |
| url('{{ "ficon.ttf" | asset_url }}') format('truetype'), | |
| url('{{ "ficon.svg" | asset_url }}#ficon') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .icon { | |
| font-family: 'ficon'; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| /* Better Font Rendering =========== */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-search:before { | |
| content: "\f002"; | |
| } | |
| .icon-email:before { | |
| content: "\f003"; | |
| } | |
| .icon-like:before { | |
| content: "\f004"; | |
| } | |
| .icon-star:before { | |
| content: "\f005"; | |
| } | |
| .icon-star-outline:before { | |
| content: "\f006"; | |
| } | |
| .icon-grid:before { | |
| content: "\f00a"; | |
| } | |
| .icon-list:before { | |
| content: "\f00b"; | |
| } | |
| .icon-close:before { | |
| content: "\f00d"; | |
| } | |
| .icon-zoom-in:before { | |
| content: "\f00e"; | |
| } | |
| .icon-zoom-out:before { | |
| content: "\f010"; | |
| } | |
| .icon-help:before { | |
| content: "\f059"; | |
| } | |
| .icon-arrow-left:before { | |
| content: "\f060"; | |
| } | |
| .icon-arrow-right:before { | |
| content: "\f061"; | |
| } | |
| .icon-alert:before { | |
| content: "\f071"; | |
| } | |
| .icon-comment:before { | |
| content: "\f075"; | |
| } | |
| .icon-cart:before { | |
| content: "\f07a"; | |
| } | |
| .icon-star-half:before { | |
| content: "\f089"; | |
| } | |
| .icon-twitter:before { | |
| content: "\f099"; | |
| } | |
| .icon-facebook:before { | |
| content: "\f09a"; | |
| } | |
| .icon-menu:before { | |
| content: "\f0c9"; | |
| } | |
| .icon-google-plus:before { | |
| content: "\f0d5"; | |
| } | |
| .icon-angle-left:before { | |
| content: "\f104"; | |
| } | |
| .icon-angle-right:before { | |
| content: "\f105"; | |
| } | |
| .icon-youtube:before { | |
| content: "\f167"; | |
| } | |
| .icon-instagram:before { | |
| content: "\f16d"; | |
| } | |
| .icon-tumblr:before { | |
| content: "\f173"; | |
| } | |
| .icon-spotify:before { | |
| content: "\f1bc"; | |
| } | |
| .icon-vine:before { | |
| content: "\f1ca"; | |
| } | |
| .icon-cc-visa:before { | |
| content: "\f1f0"; | |
| } | |
| .icon-cc-mastercard:before { | |
| content: "\f1f1"; | |
| } | |
| .icon-cc-discover:before { | |
| content: "\f1f2"; | |
| } | |
| .icon-cc-amex:before { | |
| content: "\f1f3"; | |
| } | |
| .icon-cc-paypal:before { | |
| content: "\f1f4"; | |
| } | |
| .icon-cc-stripe:before { | |
| content: "\f1f5"; | |
| } | |
| .icon-pinterest:before { | |
| content: "\f231"; | |
| } | |
| .icon-medium:before { | |
| content: "\f23a"; | |
| } | |
| /*============================================================================ | |
| // Modules | |
| ==============================================================================*/ | |
| /*============================================================================ | |
| #Basic | |
| ==============================================================================*/ | |
| html { | |
| background-color: $footerBackgroundColor; | |
| } | |
| body { | |
| background-color: $primaryBackgroundColor; | |
| border: 10px solid $siteBorderColor; | |
| padding-top: 28px; | |
| @include mediaQuery($max, $mobile) { | |
| border: 0px; | |
| } | |
| } | |
| main { | |
| > div:last-of-type { | |
| padding-bottom: 60px; | |
| border-bottom: none; | |
| } | |
| } | |
| * { | |
| @include box-sizing(border-box); | |
| } | |
| // basic button styles | |
| .button.outline { | |
| @include buttonOutline; | |
| &.large { | |
| padding: 4px 24px; | |
| font-size: em(13px); | |
| } | |
| } | |
| .button.simple { | |
| color: $primaryTextColor; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| font-size: em(11px); | |
| text-decoration: none; | |
| &:hover, | |
| &:focus { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| .button.solid { | |
| padding: 4px 14px; | |
| background: $primaryAccentColor; | |
| color: $primaryTextOnAccentColor; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| font-size: em(11px); | |
| text-decoration: none; | |
| cursor: pointer; | |
| outline: none; | |
| border: 0; | |
| &:hover, | |
| &:focus { | |
| background: $primaryHoverColor; | |
| } | |
| &:focus { | |
| outline: none; | |
| } | |
| } | |
| p.buttons.outline > a { | |
| @extend .button.outline; | |
| } | |
| p.buttons.solid > a { | |
| @extend .button.solid; | |
| } | |
| a { | |
| @include transition(color 0.1s ease-in-out); | |
| } | |
| // Pagination | |
| .pagination-container { | |
| text-align: center; | |
| } | |
| .pagination { | |
| margin: 40px auto 0; | |
| text-align: center; | |
| @include clearfix(); | |
| display: inline-block; | |
| li { | |
| float: left; | |
| a, | |
| span { | |
| display: block; | |
| border-top: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%); | |
| border-bottom: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%); | |
| border-right: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%); | |
| padding: 4px 10px; | |
| text-decoration: none; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-size: em(12px); | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 80%); | |
| } | |
| a:hover, | |
| a:focus { | |
| background: $primaryAccentColor; | |
| color: $primaryBackgroundColor; | |
| } | |
| &:first-child { | |
| a, | |
| span { | |
| border-left: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%); | |
| } | |
| } | |
| &.disabled, | |
| &.active { | |
| a, | |
| span { | |
| cursor: default; | |
| } | |
| } | |
| &.active { | |
| a, | |
| span { | |
| background: $primaryBackgroundColor; | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| &.disabled { | |
| a, | |
| span { | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| background: transparent; | |
| } | |
| } | |
| } | |
| } | |
| // Social icons | |
| ul.social-icons { | |
| margin: 0; | |
| padding: 0; | |
| li { | |
| display: inline-block; | |
| margin-right: 10px; | |
| a { | |
| display: block; | |
| font-size: em(18px); | |
| position: relative; | |
| top: -3px; | |
| color: $primaryTextColor; | |
| &:hover, | |
| &:focus { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Header Util | |
| ==============================================================================*/ | |
| header.util { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| z-index: 1200; | |
| @include clearfix(); | |
| background: $siteBorderColor; | |
| color: $siteBorderTextColor; | |
| font-size: em(12px); | |
| font-family: $navFontStack; | |
| a { | |
| color: $siteBorderTextColor; | |
| text-decoration: none; | |
| &:hover, | |
| &:focus { | |
| opacity: 0.8; | |
| } | |
| &:focus { | |
| outline-color: $siteBorderTextColor; | |
| } | |
| } | |
| // General element layout | |
| > div { | |
| margin: 6px 10px; | |
| &.left-wrapper { | |
| float: left; | |
| } | |
| &.right-wrapper { | |
| float: right; | |
| } | |
| &.search-wrapper { | |
| display: none; | |
| margin: 10px; | |
| padding: 20px 10px 20px; | |
| background: $contentBoxBackgroundColor; | |
| form { | |
| margin: 0; | |
| padding: 0; | |
| @include outer-container; | |
| @include grid(); | |
| } | |
| .icon-wrapper { | |
| @include grid-item(1); | |
| } | |
| .input-wrapper { | |
| @include grid-item(10); | |
| } | |
| .button-wrapper { | |
| @include grid-item(1); | |
| } | |
| span.icon { | |
| color: $primaryAccentColor; | |
| font-size: em(20px); | |
| } | |
| span.icon-fallback-text { | |
| display: block; | |
| height: 60px; | |
| width: 100%; | |
| text-align: right; | |
| line-height: 60px; | |
| } | |
| input { | |
| height: 60px; | |
| width: 100%; | |
| padding: 0 16px; | |
| border: 0px; | |
| border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 20%); | |
| background-color: transparent; | |
| font-size: em(36px); | |
| color: $primaryTextColor; | |
| &:focus { | |
| outline: 0; | |
| background-color: $primaryBackgroundColor; | |
| border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 60%); | |
| } | |
| } | |
| span.input-group-btn { | |
| height: 60px; | |
| button { | |
| width: 100%; | |
| height: 60px; | |
| text-align: left; | |
| padding: 0px; | |
| border: 0px; | |
| background-color: transparent; | |
| } | |
| } | |
| } | |
| // Align everything | |
| ul, | |
| a, | |
| li, | |
| .left-wrapper, | |
| .right-wrapper { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| span.icon { | |
| font-size: em(20px); | |
| margin-right: 2px; | |
| } | |
| li { | |
| margin-right: 4px; | |
| padding-right: 6px; | |
| border-right: 1px solid mix($siteBorderTextColor, $siteBorderColor, 20%); | |
| a { | |
| display: inline-block; | |
| padding: 4px 6px; | |
| } | |
| &:last-child { | |
| border-right: 0px; | |
| } | |
| &.mobile-menu { | |
| display: none; | |
| a.toggle-menu { | |
| span.icon { | |
| position: relative; | |
| top: 2px; | |
| } | |
| } | |
| } | |
| } | |
| a#CartButton { | |
| padding: 2px 12px; | |
| border: 2px solid $siteBorderTextColor; | |
| &:hover, | |
| &:focus { | |
| opacity: 1; | |
| background-color: $siteBorderTextColor; | |
| color: $siteBorderColor; | |
| } | |
| } | |
| @include mediaQuery($max, $largeMobile) { | |
| &.left-wrapper { | |
| ul.text-links li { | |
| display: none; | |
| &.mobile-menu { | |
| display: inline-block; | |
| } | |
| } | |
| } | |
| &.right-wrapper { | |
| ul.text-links li { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Cart Preview | |
| .cart-preview { | |
| display: none; | |
| position: absolute; | |
| top: 38px; | |
| right: 10px; | |
| padding: 20px; | |
| width: 300px; | |
| background: $contentBoxBackgroundColor; | |
| box-shadow: -1px 1px 2px 0px rgba(0,0,0,0.2); | |
| color: $primaryTextColor; | |
| text-transform: none; | |
| @include mediaQuery($max, $mobile) { | |
| top: 37px; | |
| left: 0; | |
| right: 0; | |
| padding: 20px; | |
| width: auto; | |
| } | |
| .cart-preview-title { | |
| font-size: em(20px); | |
| padding-bottom: 8px; | |
| margin-bottom: 12px; | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| } | |
| .box.product { | |
| padding-bottom: 12px; | |
| margin-bottom: 8px; | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| a { | |
| color: $primaryTextColor; | |
| &:hover, | |
| &:focus { | |
| opacity: 1; | |
| } | |
| } | |
| figure { | |
| @include clearfix(); | |
| > a { | |
| display: block; | |
| float: left; | |
| img { | |
| max-width: 50px; | |
| height: auto; | |
| display: block; | |
| margin-right: 6px; | |
| } | |
| } | |
| figcaption { | |
| a { | |
| display: block; | |
| font-size: em(20px); | |
| } | |
| ul.options { | |
| li { | |
| margin: 0; | |
| padding: 0; | |
| color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%); | |
| border-right: none; | |
| &:after { | |
| content: ','; | |
| } | |
| &:last-child:after { | |
| content: ''; | |
| } | |
| } | |
| } | |
| span.price { | |
| display: block; | |
| } | |
| } | |
| } | |
| } | |
| .cart-preview-total { | |
| margin-bottom: 10px; | |
| @include clearfix(); | |
| padding-bottom: 8px; | |
| margin-bottom: 12px; | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| .count { | |
| font-style: italic; | |
| font-size: 13px; | |
| margin-bottom: 4px; | |
| span { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| .label { | |
| margin-top: 3px; | |
| float: left; | |
| font-size: 10px; | |
| text-transform: $siteHeaderTitleTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| } | |
| .total { | |
| display: inline-block; | |
| font-weight: bold; | |
| font-size: 15px; | |
| float: right; | |
| } | |
| } | |
| a.button { | |
| width: 100%; | |
| text-align: center; | |
| font-size: 12px; | |
| padding-top: 8px; | |
| padding-bottom: 8px; | |
| cursor: pointer; | |
| &.outline { | |
| margin-top: 8px; | |
| padding-top: 6px; | |
| padding-bottom: 6px; | |
| } | |
| } | |
| } | |
| .search-wrapper { | |
| margin: 10px; | |
| padding: 20px 10px 20px; | |
| background: $contentBoxBackgroundColor; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| form { | |
| margin: 0; | |
| padding: 0; | |
| @include outer-container; | |
| @include grid(); | |
| } | |
| .icon-wrapper { | |
| @include grid-item(1); | |
| } | |
| .input-wrapper { | |
| @include grid-item(10); | |
| } | |
| .button-wrapper { | |
| @include grid-item(1); | |
| } | |
| span.icon { | |
| color: $primaryAccentColor; | |
| font-size: em(20px); | |
| } | |
| span.icon-fallback-text { | |
| display: block; | |
| height: 60px; | |
| width: 100%; | |
| text-align: right; | |
| line-height: 60px; | |
| } | |
| input { | |
| height: 60px; | |
| width: 100%; | |
| padding: 0 16px; | |
| border: 0px; | |
| border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 20%); | |
| background-color: transparent; | |
| font-size: em(36px); | |
| color: $primaryTextColor; | |
| @include box-sizing(border-box); | |
| &:focus { | |
| outline: 0; | |
| background-color: $primaryBackgroundColor; | |
| border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 60%); | |
| } | |
| } | |
| span.input-group-btn { | |
| height: 60px; | |
| button { | |
| width: 100%; | |
| height: 60px; | |
| text-align: left; | |
| padding: 0px; | |
| border: 0px; | |
| background-color: transparent; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Header - Site Header | |
| ==============================================================================*/ | |
| header.site-header { | |
| background-color: $siteHeaderBackgroundColor; | |
| padding: 0 20px; | |
| .wrapper { | |
| @if $siteHeaderFullWidth { | |
| @include outer-container; | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| h1.site-logo { | |
| margin: 0; | |
| padding: $siteLogoPaddingTop 0 $siteLogoPaddingBottom; | |
| font-family: $logoFontStack; | |
| font-size: em(48px); | |
| line-height: 1; | |
| font-weight: $siteHeaderTitleTextWeight; | |
| text-transform: $siteHeaderTitleTextTransform; | |
| a { | |
| color: $siteHeaderTitleTextColor; | |
| display: inline-block; | |
| } | |
| &.has-image { | |
| padding: $siteLogoPaddingTop 0 $siteLogoPaddingTop; | |
| max-width: 280px; | |
| margin: 0 auto; | |
| a { | |
| width: 100%; | |
| } | |
| } | |
| img { | |
| width: auto; | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| } | |
| div.site-logo { | |
| @extend h1; | |
| @extend h1.site-logo; | |
| } | |
| h1.site-logo, | |
| div.site-logo { | |
| @include mediaQuery($max, $tablet) { | |
| font-size: em(42px); | |
| } | |
| @include mediaQuery($max, $largeMobile) { | |
| padding-bottom: $siteLogoPaddingTop; | |
| &.has-image { | |
| padding-bottom: $siteLogoPaddingTop; | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| font-size: em(32px); | |
| } | |
| } | |
| nav.nav-bar { | |
| font-family: $navFontStack; | |
| font-size: em(14px); | |
| margin-bottom: $siteNavigationMarginBottom; | |
| ul.site-nav { | |
| li { | |
| display: inline-block; | |
| padding: 8px 0; | |
| &:last-child { | |
| margin-right: 0px; | |
| } | |
| &.has-dropdown { | |
| position: relative; | |
| z-index: 1000; | |
| > a:after { | |
| content: ''; | |
| margin-left: 6px; | |
| opacity: 0.4; | |
| display: inline-block; | |
| height: 6px; | |
| width: 8px; | |
| position: relative; | |
| top: -1px; | |
| background-image: url('{{ "ico-dropdown.svg" | asset_url }}'); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| > a:hover:after { | |
| opacity: 1; | |
| } | |
| > a { | |
| //border-bottom-color: $siteHeaderBackgroundColor; | |
| padding-right: 8px; | |
| &:hover, | |
| &:focus { | |
| border-bottom-color: $siteHeaderBackgroundColor; | |
| } | |
| } | |
| } | |
| a { | |
| display: block; | |
| border: 1px solid transparent; | |
| font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $siteHeaderNavTextTransform; | |
| text-decoration: none; | |
| color: $siteHeaderNavTextColor; | |
| background: transparent; | |
| padding: 8px 16px; | |
| &:hover, | |
| &:focus { | |
| border: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 20%); | |
| color: $siteHeaderAccentColor; | |
| background: $siteHeaderBackgroundColor; | |
| } | |
| } | |
| } | |
| } | |
| ul.dropdown { | |
| display: none; | |
| position: absolute; | |
| padding: 10px 0 0; | |
| min-width: 180px; | |
| background: $siteHeaderBackgroundColor; | |
| z-index: -1; | |
| top: 46px; | |
| text-align: left; | |
| border: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 20%); | |
| li { | |
| display: block; | |
| margin: 0 0 2px; | |
| padding: 0 0 2px; | |
| border-bottom: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 20%); | |
| &:last-child { | |
| border-bottom: none; | |
| } | |
| a { | |
| @include box-sizing(border-box); | |
| border: none; | |
| display: inline-block; | |
| margin: 0; | |
| width: 100%; | |
| font-weight: normal; | |
| text-transform: none; | |
| font-family: $bodyFontStack; | |
| font-size: em(15px); | |
| color: $siteHeaderNavTextColor; | |
| &:hover, | |
| &:focus { | |
| border: none; | |
| } | |
| } | |
| } | |
| } | |
| li.dropdown-hover { | |
| > a { | |
| border: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 20%) !important; | |
| border-bottom-color: $siteHeaderBackgroundColor !important; | |
| background-color: $siteHeaderBackgroundColor !important; | |
| } | |
| ul.dropdown { | |
| display: block; | |
| } | |
| } | |
| @include mediaQuery($max, $largeMobile) { | |
| display: none; | |
| } | |
| } | |
| // Grid Layout & Direction | |
| text-align: center; | |
| .offer-banner { | |
| display: none; | |
| background-color: $offerBannerBackgroundColor; | |
| color: $offerBannerTextColor; | |
| line-height: 1.2; | |
| padding: 0 20px; | |
| margin: 0 -20px; | |
| .wrapper { | |
| position: relative; | |
| @include outer-container($siteWidth); | |
| padding: 20px 0; | |
| } | |
| .offer-container { | |
| @include grid(); | |
| text-align: left; | |
| } | |
| .offer-message { | |
| @include grid-item(6); | |
| text-align: left; | |
| @include mediaQuery($max, $largeMobile) { | |
| @include grid-item(12); | |
| text-align: center; | |
| width: 100%; | |
| margin-bottom: 16px; | |
| } | |
| h4 { | |
| margin: 0px; | |
| font-size: em(20px); | |
| color: $offerBannerAccentColor; | |
| font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $primaryTitleTextTransform; | |
| } | |
| p { | |
| margin: 0px; | |
| font-size: em(14px); | |
| } | |
| } | |
| .offer-email { | |
| @include grid-item(6); | |
| text-align: right; | |
| position: absolute; | |
| top: 50%; | |
| right: 0; | |
| left: 50%; | |
| margin-top: -22px; | |
| @include mediaQuery($max, $largeMobile) { | |
| @include grid-item(12); | |
| text-align: center; | |
| width: 100%; | |
| position: static; | |
| top: auto; | |
| @include transform(translateY(0)); | |
| margin-top: 0px; | |
| } | |
| form { | |
| padding-right: 24px; | |
| display: table; | |
| border-collapse: collapse; | |
| width: 100%; | |
| height: 44px; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| float: right; | |
| @include mediaQuery($max, $largeMobile) { | |
| float: none; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| button { | |
| margin-right: 0; | |
| } | |
| } | |
| } | |
| .input-wrapper { | |
| display: table-cell; | |
| width: 100%; | |
| } | |
| .button-wrapper { | |
| display: table-cell; | |
| width: 1%; | |
| vertical-align: middle; | |
| font-size: 0; | |
| } | |
| input { | |
| border: 2px solid mix($offerBannerTextColor, $offerBannerBackgroundColor, 50%); | |
| padding: 7px 8px 9px; | |
| font-size: em(11px); | |
| font-weight: 600; | |
| color: $offerBannerTextColor; | |
| background-color: transparent; | |
| margin-right: 2.4%; | |
| width: 100%; | |
| outline: 0; | |
| height: 44px; | |
| &:focus { | |
| border-color: $offerBannerTextColor; | |
| } | |
| @include placeholder { | |
| color: mix($offerBannerTextColor, $offerBannerBackgroundColor, 50%); | |
| } | |
| } | |
| button { | |
| padding: 10px; | |
| background-color: $offerBannerAccentColor; | |
| color: $offerBannerTextOnAccentColor; | |
| font-size: 11px; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-family: $navFontStack; | |
| border: 0; | |
| height: 44px; | |
| margin: 0 24px 0 6px; | |
| @include no-word-wrap(); | |
| } | |
| } | |
| .offer-close { | |
| span.icon-text { | |
| position: absolute; | |
| top: 50%; | |
| right: 0; | |
| margin-top: -11px; | |
| opacity: 0.2; | |
| cursor: pointer; | |
| z-index: 100; | |
| &:hover, | |
| &:focus { | |
| opacity: 1; | |
| color: $offerBannerAccentColor; | |
| } | |
| @include mediaQuery($max, $largeMobile) { | |
| top: 6px; | |
| right: -10px; | |
| margin-top: 0; | |
| } | |
| } | |
| span.text { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Hero Content | |
| ==============================================================================*/ | |
| div.hero-content { | |
| &.multiple { | |
| padding-bottom: 20px; | |
| {% if settings.homepage_featured_page %} | |
| background-color: $homeFeaturedBackgroundColor; | |
| {% endif %} | |
| } | |
| .wrapper { | |
| background-color: $homeHeroBackgroundColor; | |
| @if $homeHeroFullWidth { | |
| @include outer-container; | |
| padding: 0; | |
| } @else { | |
| @include outer-container($siteWidth); | |
| padding: 0 20px 0; | |
| } | |
| } | |
| img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .gallery-cell { | |
| width: 100%; | |
| height: auto; | |
| position: relative; | |
| } | |
| .cell-content { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| pointer-events: none; | |
| &.justify-start { | |
| .inner-wrapper { | |
| text-align: left; | |
| } | |
| } | |
| &.justify-center { | |
| .inner-wrapper { | |
| text-align: center; | |
| h2, | |
| p { | |
| span { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } | |
| } | |
| } | |
| &.justify-end { | |
| .inner-wrapper { | |
| text-align: right; | |
| h2, | |
| p { | |
| @include clearfix(); | |
| span { | |
| float: right; | |
| } | |
| } | |
| } | |
| } | |
| &.align-start { | |
| .inner-wrapper { | |
| vertical-align: top; | |
| } | |
| } | |
| &.align-center { | |
| .inner-wrapper { | |
| vertical-align: middle; | |
| } | |
| } | |
| &.align-end { | |
| .inner-wrapper { | |
| vertical-align: bottom; | |
| } | |
| } | |
| .content-box { | |
| padding: 40px; | |
| width: 100%; | |
| height: 100%; | |
| @include mediaQuery($max, $tablet) { | |
| padding: 20px; | |
| font-size: 14px; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| padding: 20px; | |
| font-size: 12px; | |
| } | |
| } | |
| .outer-wrapper { | |
| display: table; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .inner-wrapper { | |
| display: table-cell; | |
| width: 100%; | |
| } | |
| h2, | |
| p { | |
| color: #fff; | |
| span { | |
| display: block; | |
| max-width: 40%; | |
| } | |
| } | |
| h2 { | |
| font-size: em(36px); | |
| margin-bottom: 0; | |
| text-transform: $primaryTitleTextTransform; | |
| } | |
| p { | |
| font-size: em(18px); | |
| margin-bottom: 0; | |
| } | |
| a { | |
| pointer-events: auto; | |
| } | |
| a.button { | |
| @extend .button.outline; | |
| display: inline-block; | |
| margin: 14px 0 0; | |
| padding: 4px 24px; | |
| font-size: em(13px); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| h2 { | |
| font-size: 1.125em; | |
| } | |
| p { | |
| font-size: 0.875em; | |
| margin-bottom: 0; | |
| } | |
| a.button { | |
| @extend .button.outline; | |
| display: inline-block; | |
| margin: 0.5em 0; | |
| padding: 2px 6px; | |
| } | |
| } | |
| } | |
| // show content after enabled | |
| .js-flickity { | |
| .cell-content { | |
| visibility: hidden; | |
| } | |
| &.flickity-enabled { | |
| .cell-content { | |
| visibility: visible; | |
| } | |
| } | |
| } | |
| // Colors for specific heros | |
| {% if settings.homepage_hero_slider_enable %} | |
| // Built in max slides | |
| {% assign slider_count = 5 %} | |
| {% for i in (1..slider_count) %} | |
| {% assign hero = "homepage_hero_image_" | append:i %} | |
| {% assign text_color = hero | append:"_text_color" %} | |
| {% assign accent_color = hero | append:"_accent_color" %} | |
| .{{ hero }} { | |
| .cell-content { | |
| h2, | |
| p { | |
| color: {{ settings[text_color] }}; | |
| } | |
| a { | |
| color: {{ settings[accent_color] }}; | |
| &.button { | |
| border-color: {{ settings[accent_color] }}; | |
| &:hover, | |
| &:focus { | |
| color: {{ settings[text_color] }}; | |
| border-color: {{ settings[text_color] }}; | |
| } | |
| } | |
| &:hover, | |
| &:focus { | |
| color: {{ settings[text_color] }}; | |
| border-color: {{ settings[text_color] }}; | |
| } | |
| } | |
| } | |
| } | |
| {% endfor %} | |
| {% endif %} | |
| } | |
| div.header-content { | |
| padding-bottom: 0 !important; | |
| .wrapper { | |
| @if $genericFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| } | |
| /*============================================================================ | |
| #Featured Text | |
| ==============================================================================*/ | |
| div.featured-text { | |
| padding: $sectionPadding 20px; | |
| {% if settings.homepage_show_borders %} | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| {% endif %} | |
| .wrapper { | |
| @if $homeFeaturedFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| padding: 40px 20px 20px; | |
| font-size: 14px; | |
| } | |
| background-color: $homeFeaturedBackgroundColor; | |
| h2.title { | |
| text-align: center; | |
| margin-bottom: em(4px); | |
| text-transform: $primaryTitleTextTransform; | |
| font-weight: $primaryTitleTextWeight; | |
| font-size: em(28px); | |
| } | |
| .content { | |
| margin: 0 auto; | |
| p { | |
| max-width: 80%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| font-size: em(16px); | |
| p { | |
| max-width: none; | |
| } | |
| } | |
| } | |
| &.page-featured { | |
| .content { | |
| {% if settings.homepage_featured_page_larger_text_enable %} | |
| font-size: em(20px); | |
| {% endif %} | |
| } | |
| } | |
| &.full-width { | |
| padding: $sectionPadding 0; | |
| } | |
| } | |
| /*============================================================================ | |
| #Featured Grid | |
| ==============================================================================*/ | |
| div.featured-grid { | |
| padding: $sectionPadding 20px; | |
| {% if settings.homepage_show_borders %} | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| {% endif %} | |
| .wrapper { | |
| @if $homeFeaturedCollectionsFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| h3 { | |
| margin-bottom: 20px; | |
| text-align: center; | |
| font-size: em(24px); | |
| text-transform: $primaryTitleTextTransform; | |
| font-weight: $primaryTitleTextWeight; | |
| } | |
| .row { | |
| @include grid(); | |
| margin-bottom: $gridGutter; | |
| &.row-2 { | |
| .box { | |
| @include grid-item(6); | |
| } | |
| } | |
| &.row-3 { | |
| .box { | |
| @include grid-item(4); | |
| } | |
| } | |
| &:last-of-type { | |
| margin-bottom: 0px; | |
| } | |
| @include mediaQuery($max, $largeMobile) { | |
| margin-bottom: 0; | |
| &.row-2, | |
| &.row-3 { | |
| .box { | |
| @include grid-item(); | |
| margin-bottom: 20px; | |
| } | |
| } | |
| } | |
| } | |
| .box { | |
| a { | |
| display: block; | |
| background-size: contain; | |
| background-position: center center; | |
| } | |
| figure { | |
| position: relative; | |
| display: block; | |
| overflow: hidden; | |
| max-width: 575px; | |
| margin: 0 auto; | |
| img { | |
| @include transition(all 2.0s ease-in-out); | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| margin: 0 auto; | |
| } | |
| &:after { | |
| @include transition(background-color 0.5s ease-out); | |
| content: ''; | |
| background: transparent; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 10; | |
| } | |
| figcaption { | |
| position: absolute; | |
| top: 50%; | |
| @include transform(translateY(-50%)); | |
| width: 100%; | |
| text-align: center; | |
| z-index: 20; | |
| h4 { | |
| margin: 0 auto; | |
| display: inline-block; | |
| color: $primaryTextOnAccentColor; | |
| border: 2px solid $primaryTextOnAccentColor; | |
| text-transform: $primaryTitleTextTransform; | |
| font-weight: bold; | |
| padding: 6px 16px; | |
| font-size: 1.6em; | |
| text-shadow: 1px 1px 1px rgba(0,0,0,0.4); | |
| width: auto; | |
| max-width: 90%; | |
| @include transition(all 0.5s ease-in-out); | |
| } | |
| } | |
| } | |
| a.text-overlay:hover, | |
| a.text-overlay:focus { | |
| figure { | |
| &:after { | |
| background: rgba($primaryAccentColor, 0.4); | |
| } | |
| } | |
| figcaption { | |
| h4 { | |
| border-width: 4px; | |
| padding: 12px 32px; | |
| background-color: transparent; | |
| @include transform(scale(1.1)); | |
| } | |
| } | |
| } | |
| a.zoom:hover, | |
| a.zoom:focus { | |
| figure { | |
| img { | |
| @include transform(scale(1.05)); | |
| } | |
| } | |
| figcaption { | |
| h4 { | |
| @include transform(scale(1.1)); | |
| } | |
| } | |
| } | |
| a.rollover { | |
| figure { | |
| img { | |
| @include transition(none); | |
| } | |
| } | |
| } | |
| a.rollover:hover, | |
| a.rollover:focus { | |
| figure { | |
| &:after { | |
| display: none; | |
| } | |
| img { | |
| @include transition(none); | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Collections | |
| ==============================================================================*/ | |
| // Combined structures | |
| .collection, | |
| .featured-collection, | |
| .simple-collection { | |
| padding: $productCollectionPaddingTop 20px $sectionPadding; | |
| background: $productCollectionBackgroundColor; | |
| {% if settings.homepage_show_borders %} | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| {% endif %} | |
| @include mediaQuery($max, $tablet) { | |
| padding: 40px 20px; | |
| } | |
| .wrapper { | |
| @if $productCollectionFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| .collection-container { | |
| padding: 12px 0 40px 0; | |
| } | |
| } | |
| // Homepage Featured Collection | |
| .featured-collection { | |
| padding: $sectionPadding 20px; | |
| .grid { | |
| @include grid(); | |
| } | |
| .box { | |
| @include grid-item(3); | |
| margin-bottom: $gridGutter; | |
| &.header { | |
| text-align: center; | |
| .details { | |
| width: 100%; | |
| padding-right: $gridGutter; | |
| } | |
| h4 { | |
| font-size: em(28px); | |
| text-transform: $primaryTitleTextTransform; | |
| font-weight: $primaryTitleTextWeight; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| p{ | |
| font-size: em(14px); | |
| } | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| @include grid-item(6); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(12); | |
| } | |
| } | |
| &.layout-8, | |
| &.layout-4 { | |
| .box { | |
| &.header { | |
| @include grid-item(12); | |
| } | |
| } | |
| } | |
| &.layout-6, | |
| &.layout-2 { | |
| .box { | |
| &.header { | |
| @include grid-item(6); | |
| position: relative; | |
| .details { | |
| position: absolute; | |
| top: 50%; | |
| @include transform(translateY(-50%)); | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| @include grid-item(12); | |
| height: auto !important; | |
| .details { | |
| position: static; | |
| top: auto; | |
| @include transform(translateY(0)); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Include product thumbnail | |
| @extend %product-thumbnail; | |
| } | |
| // Simple collection with a header | |
| .simple-collection { | |
| padding: $sectionPadding 20px; | |
| header { | |
| @include clearfix(); | |
| position: relative; | |
| margin-bottom: 20px; | |
| h4 { | |
| float: left; | |
| margin: 0; | |
| font-size: em(28px); | |
| text-transform: $primaryTitleTextTransform; | |
| font-weight: $primaryTitleTextWeight; | |
| } | |
| a.button.outline { | |
| float: right; | |
| top: 5px; | |
| position: relative; | |
| @include buttonOutline; | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| text-align: center; | |
| h4 { | |
| float: none; | |
| } | |
| a.button.outline { | |
| float: none; | |
| position: static; | |
| top: auto; | |
| @include transform(translateY(0)); | |
| } | |
| padding-bottom: 20px; | |
| } | |
| } | |
| .product-container { | |
| @include grid(); | |
| .box { | |
| @include grid-item(3); | |
| margin-bottom: $gridGutter; | |
| @include mediaQuery($max, $tablet) { | |
| @include grid-item(6); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(12); | |
| } | |
| } | |
| } | |
| // Include product thumbnail | |
| @extend %product-thumbnail; | |
| } | |
| // Collection (product collection page) | |
| .collection { | |
| margin-top: 0; | |
| .grid { | |
| @include grid(false, true); | |
| .aside-container { | |
| @include grid-item(3); | |
| } | |
| .collection-container{ | |
| @include grid-item(9); | |
| } | |
| &.full-width { | |
| .collection-container{ | |
| @include grid-item(12); | |
| } | |
| } | |
| @include mediaQuery($max, 950px) { | |
| .aside-container { | |
| @include grid-item(4); | |
| } | |
| .collection-container{ | |
| @include grid-item(8); | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| .aside-container { | |
| @include grid-item(12); | |
| } | |
| .collection-container{ | |
| @include grid-item(12); | |
| } | |
| } | |
| } | |
| &.blog { | |
| .grid{ | |
| @include grid(false, false); | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| .aside-container { | |
| display: none; | |
| } | |
| } | |
| } | |
| aside { | |
| @include clearfix(); | |
| padding: 20px; | |
| background: $contentBoxBackgroundColor; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| nav { | |
| margin-bottom: 20px; | |
| -ms-word-break: break-all; | |
| word-break: break-all; | |
| // Non standard for webkit | |
| word-break: break-word; | |
| -webkit-hyphens: auto; | |
| -moz-hyphens: auto; | |
| hyphens: auto; | |
| &:last-of-type { | |
| margin-bottom: 0px; | |
| } | |
| h5 { | |
| margin-bottom: 6px; | |
| padding-bottom: 6px; | |
| font-size: em(20px); | |
| text-transform: $primaryTitleTextTransform; | |
| color: $primaryTitleColor; | |
| font-weight: $primaryTitleTextWeight; | |
| border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%); | |
| } | |
| li.active { | |
| a { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| span.title { | |
| display: block; | |
| font-family: $bodyFontStack; | |
| margin-bottom: 4px; | |
| line-height: 1.4; | |
| } | |
| time, | |
| a.util { | |
| position: relative; | |
| font-family: $navFontStack; | |
| //font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-size: 11px; | |
| } | |
| a { | |
| font-size: em(15px); | |
| text-decoration: none; | |
| color: $primaryTextColor; | |
| text-transform: capitalize; | |
| &:hover, | |
| &:focus { | |
| color: $primaryHoverColor; | |
| } | |
| &.active { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| &.tags { | |
| ul { | |
| padding-left: 8px; | |
| } | |
| li { | |
| display: inline-block; | |
| margin: 0 0 2px 0; | |
| a { | |
| @include buttonOutline; | |
| padding: 4px 0; | |
| font-size: 0.625em; | |
| border: none; | |
| box-shadow: 8px 0 0 mix($primaryTextColor, $contentBoxBackgroundColor, 10%), -8px 0 0 mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| background-color: mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| margin-right: 18px; | |
| &:hover { | |
| color: $primaryTextOnAccentColor; | |
| background-color: $primaryAccentColor; | |
| border-color: $primaryAccentColor; | |
| box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor; | |
| } | |
| } | |
| &.active { | |
| a { | |
| color: $primaryTextOnAccentColor; | |
| background-color: $primaryAccentColor; | |
| border-color: $primaryAccentColor; | |
| box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor; | |
| } | |
| &.close a:after { | |
| @extend .icon; | |
| content: "\f00d"; | |
| font-size: 11px; | |
| position: relative; | |
| top: 1px; | |
| padding-left: 4px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| margin: 20px auto 40px; | |
| .nav-container { | |
| @include grid(); | |
| } | |
| nav { | |
| text-align: center; | |
| h5 { | |
| font-size: em(18px); | |
| } | |
| @include grid-item(12); | |
| &.menu-3 { | |
| @include grid-item(4); | |
| } | |
| &.menu-2 { | |
| @include grid-item(6); | |
| } | |
| &.menu-1 { | |
| @include grid-item(12); | |
| } | |
| &.tags { | |
| @include grid-item(12); | |
| } | |
| } | |
| } | |
| @include mediaQuery($max, 600px) { | |
| nav { | |
| &.menu-3, | |
| &.menu-2, | |
| &.menu-1 { | |
| @include grid-item(12); | |
| } | |
| @include grid-item(12); | |
| text-align: center !important; | |
| li { | |
| display: inline-block; | |
| a { | |
| display: inline-block; | |
| &:after { | |
| content: ', '; | |
| } | |
| } | |
| &:last-child { | |
| a:after { | |
| content: ''; | |
| } | |
| } | |
| } | |
| &.recent-posts, { | |
| li { | |
| display: block; | |
| a:after { | |
| content: ''; | |
| } | |
| } | |
| } | |
| &.tags, { | |
| li { | |
| a:after { | |
| content: ''; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .aside-container { | |
| @include mediaQuery($max, $tablet) { | |
| display: none; | |
| } | |
| } | |
| // Top tag filter for tablet and below | |
| .mobile-aside-container { | |
| display: none; | |
| margin: -24px 0 30px; | |
| text-align: center; | |
| @include mediaQuery($max, $tablet) { | |
| display: block; | |
| } | |
| a.button.simple { | |
| background-color: transparent; | |
| background-image: url('{{ "ico-select.svg" | asset_url }}'); | |
| background-position: right 5px center; | |
| background-repeat: no-repeat; | |
| padding: 0 20px 0 10px; | |
| } | |
| aside { | |
| margin: 10px 0 0; | |
| display: none; | |
| } | |
| } | |
| .products { | |
| padding-bottom: 16px; | |
| margin-bottom: 16px; | |
| @include clearfix(); | |
| } | |
| .products-grid { | |
| position: relative; | |
| @include grid(); | |
| .box.product { | |
| @include grid-item(4); | |
| margin-bottom: 20px; | |
| figcaption { | |
| text-align: center; | |
| } | |
| @include mediaQuery($max, 950px) { | |
| @include grid-item(6); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(12); | |
| } | |
| } | |
| &.full-width { | |
| .box.product { | |
| @include grid-item(3); | |
| @include mediaQuery($max, $tablet) { | |
| @include grid-item(6); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(12); | |
| } | |
| } | |
| } | |
| > p { | |
| font-size: 16px; | |
| } | |
| } | |
| .products-list { | |
| &.full-width { | |
| margin: 0 auto; | |
| max-width: 800px; | |
| } | |
| .box.product { | |
| figure { | |
| @include clearfix(); | |
| margin-bottom: 20px; | |
| padding-bottom: 20px; | |
| .product-thumbnail { | |
| width: 120px; | |
| margin-right: 12px; | |
| float: left; | |
| @include mediaQuery(null, $post-small, $pre-mobile) { | |
| width: 80px; | |
| } | |
| @include mediaQuery($max, $small) { | |
| width: 100%; | |
| float: none; | |
| margin-bottom: 12px; | |
| } | |
| a { | |
| display: block; | |
| background-color: $contentBoxBackgroundColor; | |
| } | |
| img { | |
| margin: 0 auto; | |
| height: auto; | |
| display: block; | |
| } | |
| } | |
| figcaption { | |
| margin-left: 132px; | |
| margin-top: 0; | |
| @include mediaQuery(null, $post-small, $pre-mobile) { | |
| margin-left: 92px; | |
| } | |
| @include mediaQuery($max, $small) { | |
| margin-left: 0; | |
| } | |
| header { | |
| display: table; | |
| width: 100%; | |
| padding-bottom: 6px; | |
| margin-bottom: 6px; | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 20%); | |
| } | |
| a.product-title { | |
| font-weight: bold; | |
| display: table-cell; | |
| text-align: left; | |
| } | |
| span.price { | |
| display: table-cell; | |
| text-align: right; | |
| min-width: 100px; | |
| } | |
| span.label { | |
| background-color: $contentBoxBackgroundColor; | |
| &.sale { | |
| background-color: $primaryAccentColor; | |
| } | |
| } | |
| @include mediaQuery($max, "400px") { | |
| a.product-title, | |
| span.price { | |
| display: block; | |
| text-align: left; | |
| min-width: 0; | |
| } | |
| } | |
| p.description { | |
| font-size: em(14px); | |
| margin-bottom: 6px; | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| margin-bottom: 40px; | |
| } | |
| } | |
| } | |
| } | |
| // search results | |
| &.search-results { | |
| .search-wrapper { | |
| padding: 20px; | |
| form { | |
| margin: 0; | |
| .icon-wrapper { | |
| padding: 0; | |
| margin: 0; | |
| display: block; | |
| width: 30px; | |
| float: left; | |
| } | |
| .input-wrapper { | |
| padding: 0 20px 0 60px; | |
| margin: 0; | |
| display: block; | |
| float: none; | |
| width: 100%; | |
| padding-left: 60px; | |
| } | |
| .button-wrapper { | |
| display: none; | |
| } | |
| } | |
| } | |
| .collection-header { | |
| margin-top: 40px; | |
| } | |
| h1 { | |
| text-align: center; | |
| float: none; | |
| text-transform: none; | |
| font-size: em(36px); | |
| } | |
| .search-list { | |
| width: 100%; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .simple-collection { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| .search-wrapper { | |
| margin-bottom: 40px; | |
| form { | |
| .icon-wrapper { | |
| width: 20px; | |
| } | |
| .input-wrapper { | |
| padding: 0 20px 0 20px; | |
| input { | |
| font-size: em(18px); | |
| } | |
| } | |
| } | |
| // .icon-fallback-text { | |
| // height: 40px; | |
| // span.icon { | |
| // top: -6px; | |
| // } | |
| // } | |
| // .input-wrapper { | |
| // input { | |
| // height: 40px; | |
| // font-size: em(22px); | |
| // } | |
| // } | |
| } | |
| } | |
| } | |
| // Include product thumbnail | |
| @extend %product-thumbnail; | |
| } | |
| // Generic collections header | |
| header.collection-header { | |
| margin-bottom: $productCollectionHeaderMarginBottom; | |
| > .container { | |
| @include clearfix(); | |
| padding-bottom: 3px; | |
| margin-bottom: 16px; | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| } | |
| h1 { | |
| text-transform: $primaryTitleTextTransform; | |
| font-size: em(28px); | |
| margin-bottom: 0px; | |
| float: left; | |
| } | |
| .sort-by { | |
| float: right; | |
| padding-top: 4px; | |
| margin-bottom: 8px; | |
| label { | |
| margin-right: 4px; | |
| font-size: em(9px); | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| text-transform: $siteHeaderTitleTextTransform; | |
| } | |
| select { | |
| margin: 0; | |
| border: 0px; | |
| outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| outline-offset: 1px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| height: 26px; | |
| &:focus { | |
| outline: 2px solid $primaryAccentColor; | |
| } | |
| } | |
| .layout-options { | |
| margin-left: 6px; | |
| position: relative; | |
| top: 3px; | |
| display: inline-block; | |
| } | |
| button { | |
| margin: 0; | |
| border: none; | |
| background: transparent; | |
| padding: 0; | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 20%); | |
| &.active { | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| } | |
| &:hover, | |
| &:focus { | |
| outline: 0; | |
| color: $primaryAccentColor; | |
| } | |
| &:focus { | |
| } | |
| } | |
| } | |
| .collection-image { | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| width: auto; | |
| height: auto; | |
| margin: 0 auto 10px; | |
| } | |
| } | |
| .description { | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| text-align: center; | |
| h1 { | |
| float: none; | |
| } | |
| .sort-by { | |
| float: none; | |
| margin-bottom: 10px; | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| .sort-by { | |
| label { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| footer.collection-footer { | |
| text-align: center; | |
| } | |
| // Extend Product Thumbnail | |
| %product-thumbnail { | |
| figure { | |
| position: relative; | |
| display: block; | |
| cursor: pointer; | |
| a.product-image { | |
| background-color: $contentBoxBackgroundColor; | |
| } | |
| a.product-image.view-alt { | |
| background-position: -1000px -1000px; | |
| background-repeat: no-repeat; | |
| } | |
| &:hover, | |
| &:focus { | |
| a.product-image.view-alt { | |
| background-position: center center; | |
| background-size: cover; | |
| img { | |
| opacity: 0; | |
| } | |
| } | |
| a.product-image { | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| } | |
| figcaption { | |
| a.product-title { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| span.rating { | |
| opacity: 1; | |
| } | |
| } | |
| & > a { | |
| position: relative; | |
| display: block; | |
| background-size: cover; | |
| background-position: center center; | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| margin: 0 auto; | |
| height: auto; | |
| @include transition(all 0.1s ease-out); | |
| } | |
| span.label { | |
| position: absolute; | |
| bottom: 4px; | |
| right: 4px; | |
| padding: 1px 8px; | |
| background-color: $primaryImageLabelColor; | |
| color: $primaryImageLabelAccentColor; | |
| font-family: $navFontStack; | |
| font-size: em(10px); | |
| font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $siteHeaderNavTextTransform; | |
| &.sale { | |
| background-color: $primaryImageLabelAccentColor; | |
| color: $primaryImageLabelColor; | |
| } | |
| } | |
| span.rating { | |
| opacity: 0; | |
| position: absolute; | |
| bottom: 4px; | |
| left: 4px; | |
| padding: 2px 8px 1px; | |
| background-color: $primaryImageLabelColor; | |
| color: $primaryImageLabelAccentColor; | |
| font-family: $navFontStack; | |
| font-size: em(10px); | |
| .icon-star-outline { | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| } | |
| } | |
| } | |
| } | |
| figcaption { | |
| margin-top: 10px; | |
| line-height: 1.3; | |
| a.product-title { | |
| display: block; | |
| margin-top: 4px; | |
| color: $primaryTextColor; | |
| font-size: em(15px); | |
| text-decoration: none; | |
| text-align: center; | |
| &:hover, | |
| &:focus { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| span.price { | |
| display: block; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| font-weight: $siteHeaderNavTextWeight; | |
| text-align: center; | |
| } | |
| span.original-price { | |
| font-weight: normal; | |
| text-decoration: line-through; | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 50%); | |
| } | |
| span.from { | |
| font-weight: normal; | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 50%); | |
| } | |
| span.label { | |
| padding: 4px 8px; | |
| background-color: $primaryImageLabelColor; | |
| color: $primaryImageLabelAccentColor; | |
| font-family: $navFontStack; | |
| font-size: em(10px); | |
| font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $siteHeaderNavTextTransform; | |
| &.sale { | |
| background-color: $primaryAccentColor; | |
| color: $primaryImageLabelColor; | |
| } | |
| } | |
| span.rating { | |
| color: $primaryImageLabelAccentColor; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| vertical-align: -1px; | |
| .icon-star-outline { | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Products | |
| ==============================================================================*/ | |
| // Combined structures | |
| .single-product { | |
| padding: 20px 20px 60px; | |
| background: $productCollectionBackgroundColor; | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| .wrapper { | |
| @if $productCollectionFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| .grid { | |
| @include grid(); | |
| aside.product-aside { | |
| @include grid-item(5); | |
| } | |
| .product-images { | |
| @include grid-item(7); | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| aside.product-aside, | |
| .product-images { | |
| @include grid-item(12); | |
| margin: 0 0 10px; | |
| } | |
| } | |
| } | |
| } | |
| header.product-header { | |
| @include clearfix(); | |
| padding-bottom: 8px; | |
| margin-bottom: $productHeaderMarginBottom; | |
| padding-top: 12px; | |
| border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%); | |
| h1 { | |
| font-size: em(36px); | |
| margin-bottom: 0px; | |
| float: left; | |
| @include mediaQuery($min, $pre-tablet) { | |
| display: none; | |
| } | |
| } | |
| ul.product-jump { | |
| padding-top: 30px; | |
| margin-bottom: 8px; | |
| line-height: 1; | |
| float: right; | |
| font-size: em(11px); | |
| text-transform: $siteHeaderTitleTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| @include mediaQuery($max, $mobile) { | |
| padding-top: 10px; | |
| } | |
| li { | |
| display: inline-block; | |
| &:after { | |
| content: ' | '; | |
| } | |
| &:last-child { | |
| a { | |
| padding-right: 0px; | |
| } | |
| &:after { | |
| content: ''; | |
| } | |
| } | |
| } | |
| } | |
| a { | |
| text-decoration: none; | |
| color: $primaryTextColor; | |
| padding: 4px 6px; | |
| &:hover, | |
| &:focus { | |
| color: $primaryAccentColor; | |
| } | |
| span { | |
| position: relative; | |
| top: -1px; | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| text-align: center; | |
| h1 { | |
| float: none; | |
| } | |
| ul.product-jump { | |
| float: none; | |
| top: auto; | |
| } | |
| } | |
| } | |
| aside.product-aside { | |
| .purchase-box { | |
| {% if settings.product_box_padding %} | |
| padding: 20px; | |
| background: $contentBoxBackgroundColor; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| {% else %} | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%); | |
| {% endif %} | |
| margin-bottom: 20px; | |
| @include mediaQuery($max, $tablet) { | |
| max-width: 540px; | |
| margin: 40px auto; | |
| } | |
| @include word-wrap(); | |
| } | |
| .description { | |
| p, | |
| ul { | |
| font-size: em(14px); | |
| } | |
| h4 { | |
| text-transform: $primaryTitleTextTransform; | |
| font-weight: $primaryTitleTextWeight; | |
| padding-bottom: 2px; | |
| padding-top: 8px; | |
| margin-bottom: 8px; | |
| border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%); | |
| &:first-of-type { | |
| padding-top: 0px; | |
| } | |
| } | |
| } | |
| } | |
| .purchase-box { | |
| h1 { | |
| font-size: em(30px); | |
| margin-bottom: 4px; | |
| } | |
| .selection-wrapper { | |
| padding-bottom: 20px; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%); | |
| p { | |
| text-align: left; | |
| } | |
| &.variant { | |
| select { | |
| width: 100%; | |
| height: 30px; | |
| margin: 0; | |
| border: 0px; | |
| outline: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 40%); | |
| outline-offset: -2px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| } | |
| } | |
| .variant-grid { | |
| @include grid(); | |
| margin-left: -20px; | |
| .selector-wrapper { | |
| @include grid-item(6); | |
| padding-left: 20px; | |
| } | |
| > select { | |
| @include grid-item(12); | |
| margin-left: 20px; | |
| width: auto; | |
| height: 30px; | |
| border: 0px; | |
| outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| outline-offset: -2px; | |
| font-family: $navFontStack; | |
| font-size: 12px; | |
| text-transform: $siteHeaderNavTextTransform; | |
| padding-left: 10px; | |
| } | |
| } | |
| &.price { | |
| padding-bottom: 10px; | |
| > span { | |
| font-size: em(18px); | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| color: $primaryAccentColor; | |
| } | |
| select { | |
| font-size: em(10px); | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| } | |
| p { | |
| margin: 0; | |
| font-style: italic; | |
| } | |
| } | |
| &.cart { | |
| padding: 0; | |
| margin: 20px 0 0; | |
| border-bottom: 0; | |
| background-color: transparent; | |
| display: table; | |
| border-collapse: collapse; | |
| width: 100%; | |
| vertical-align: middle; | |
| .selector-wrapper.quantity { | |
| width: 100px; | |
| display: table-cell; | |
| vertical-align: bottom; | |
| padding-right: 20px; | |
| button, | |
| input { | |
| height: 34px; | |
| padding: 6px 8px; | |
| } | |
| } | |
| .button-wrapper { | |
| width: 100%; | |
| display: table-cell; | |
| vertical-align: bottom; | |
| } | |
| button { | |
| padding: 8px; | |
| } | |
| } | |
| } | |
| .cart-error { | |
| text-align: center; | |
| font-size: em(14px); | |
| } | |
| } | |
| .product-images { | |
| @if $productPhotoThumbnailsSide { | |
| .images-container { | |
| @include grid(); | |
| } | |
| .featured { | |
| @include grid-item(10); | |
| &.full-width { | |
| @include grid-item(12); | |
| } | |
| } | |
| .thumbnails { | |
| @include grid-item(2); | |
| } | |
| @include mediaQuery($max, 1000px) { | |
| .featured { | |
| @include grid-item(12); | |
| } | |
| .thumbnails { | |
| @include grid-item(12); | |
| } | |
| .thumbnails { | |
| margin-top: 10px; | |
| text-align: center; | |
| li { | |
| width: 20%; | |
| margin-right: 10px; | |
| display: inline-block; | |
| vertical-align: top; | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| .thumbnails { | |
| margin-bottom: 10px; | |
| } | |
| } | |
| } @else { | |
| .thumbnails { | |
| margin-top: 10px; | |
| text-align: center; | |
| li { | |
| width: 20%; | |
| margin-right: 10px; | |
| display: inline-block; | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| } | |
| } | |
| .featured { | |
| a { | |
| display: block; | |
| background-color: $contentBoxBackgroundColor; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| } | |
| img { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 100%; | |
| height: auto; | |
| {% if settings.product_featured_scale_enabled %} | |
| width: 100%; | |
| {% endif %} | |
| } | |
| } | |
| .thumbnails { | |
| li { | |
| margin-bottom: 12px; | |
| @include mediaQuery($max, $tablet) { | |
| margin-bottom: 0; | |
| } | |
| } | |
| a { | |
| display: block; | |
| border: 2px solid $primaryBackgroundColor; | |
| background-color: $contentBoxBackgroundColor; | |
| &:hover, | |
| &:focus { | |
| img { | |
| opacity: 0.8; | |
| } | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| } | |
| &.active { | |
| border: 2px solid $primaryTextColor; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: none; | |
| {% endif %} | |
| } | |
| } | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| margin: 0 auto; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Cart | |
| ==============================================================================*/ | |
| .cart { | |
| padding: 20px 20px 60px; | |
| background: $productCollectionBackgroundColor; | |
| //border-bottom: 1px solid lighten($primaryTextColor, 50%); | |
| &.page-top { | |
| padding-bottom: 20px; | |
| } | |
| .wrapper { | |
| @if $productCollectionFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| header.cart-header { | |
| margin-bottom: 30px; | |
| h1 { | |
| text-align: center; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| text-transform: $primaryTitleTextTransform; | |
| } | |
| } | |
| .cart-container { | |
| margin: 0 auto 20px; | |
| > p { | |
| text-align: center; | |
| } | |
| } | |
| .cart-items { | |
| width: 100%; | |
| padding: 20px; | |
| background: $contentBoxBackgroundColor; | |
| margin-bottom: 30px; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| } | |
| .label-row { | |
| font-size: em(12px); | |
| color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%); | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| padding-bottom: 10px; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| .td, | |
| .td.cart-item-product { | |
| font-size: 12px; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| display: none; | |
| } | |
| } | |
| .cart-item { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| &:last-of-type { | |
| border-bottom: 0; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| padding-bottom: 0; | |
| } | |
| } | |
| .grid { | |
| @include grid(); | |
| } | |
| .td { | |
| @include grid-item(2); | |
| } | |
| .td { | |
| @include grid-item(2); | |
| text-align: center; | |
| &.cart-item-product { | |
| @include grid-item(6); | |
| text-align: left; | |
| } | |
| &.cart-item-total { | |
| text-align: right; | |
| } | |
| @include mediaQuery($max, "900px") { | |
| @include grid-item(3); | |
| &.cart-item-product { | |
| @include grid-item(3); | |
| } | |
| .quantity-select button { | |
| width: 20px; | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| &.cart-item-product { | |
| @include grid-item(12); | |
| } | |
| &.cart-item-price { | |
| @include grid-item(12); | |
| text-align: center; | |
| } | |
| &.cart-item-quantity { | |
| @include grid-item(12); | |
| } | |
| &.cart-item-total { | |
| @include grid-item(12); | |
| text-align: center; | |
| } | |
| margin-bottom: 16px; | |
| .quantity-select button { | |
| width: 30px; | |
| } | |
| } | |
| } | |
| .cart-item-product { | |
| @include clearfix(); | |
| @include mediaQuery($max, $mobile) { | |
| margin-bottom: 10px; | |
| } | |
| .cart-item-image { | |
| float: left; | |
| width: 160px; | |
| margin-right: 16px; | |
| a { | |
| display: block; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| @include mediaQuery($max, "900px") { | |
| float: none; | |
| margin-right: 0; | |
| width: 60px; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| float: left; | |
| margin-right: 16px; | |
| } | |
| } | |
| .cart-item-title { | |
| a.title { | |
| display: block; | |
| color: $primaryTextColor; | |
| text-decoration: none; | |
| font-size: em(20px); | |
| } | |
| span.vendor { | |
| font-style: italic; | |
| display: block; | |
| } | |
| span.variant { | |
| font-size: em(12px); | |
| color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%); | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| } | |
| @include mediaQuery($max, "900px") { | |
| a.title { | |
| font-size: em(16px); | |
| } | |
| span.vendor { | |
| font-size: 11px; | |
| display: block; | |
| } | |
| span.variant { | |
| font-size: 11px; | |
| display: block; | |
| } | |
| } | |
| } | |
| } | |
| .cart-item-price { | |
| @include mediaQuery($max, $mobile) { | |
| display: none; | |
| } | |
| } | |
| .cart-item-quantity { | |
| .quantity-select { | |
| width: 100px; | |
| margin: 0 auto; | |
| } | |
| input, | |
| button { | |
| vertical-align: top; | |
| } | |
| a.remove { | |
| display: block; | |
| font-size: em(12px); | |
| margin-top: 10px; | |
| text-decoration: none; | |
| color: mix($primaryTextColor, $contentBoxBackgroundColor, 40%); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| width: auto !important; | |
| display: inline-block; | |
| text-align: left; | |
| a.remove { | |
| font-size: 11px; | |
| margin-top: 4px; | |
| } | |
| } | |
| @include mediaQuery($max, "350px") { | |
| .quantity-select { | |
| width: auto; | |
| } | |
| button { | |
| display: none; | |
| } | |
| input { | |
| margin: 0; | |
| } | |
| } | |
| } | |
| .cart-item { | |
| .cart-item-total { | |
| font-size: 18px; | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| color: $primaryAccentColor; | |
| @include mediaQuery($max, $mobile) { | |
| font-size: 16px; | |
| width: auto !important; | |
| display: inline-block; | |
| float: right; | |
| } | |
| } | |
| } | |
| .cart-notes { | |
| @include grid-item(6); | |
| textarea { | |
| width: 100%; | |
| margin: 12px 0 0 0; | |
| padding: 6px; | |
| border: 0px; | |
| outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| outline-offset: -2px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| min-height: 120px; | |
| background-color: $contentBoxBackgroundColor; | |
| &:focus { | |
| outline-color: $primaryAccentColor; | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| float: none; | |
| width: 100%; | |
| display: block; | |
| max-width: 440px; | |
| margin: 0 auto; | |
| margin-bottom: 20px; | |
| } | |
| } | |
| .cart-checkout { | |
| text-align: right; | |
| @include grid-item(6); | |
| p.subtotal { | |
| font-size: em(18px); | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| span { | |
| color: $primaryAccentColor; | |
| } | |
| .minimal-select { | |
| font-size: 12px; | |
| } | |
| } | |
| input { | |
| font-size: em(14px); | |
| padding: 10px 24px; | |
| &.button.outline { | |
| padding-top: 8px; | |
| padding-bottom: 8px; | |
| margin-right: 10px; | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| text-align: center; | |
| @include grid-item(12); | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| .cart-checkout input.button.outline { | |
| margin-right: 0; | |
| } | |
| input[type="submit"] { | |
| width: 100%; | |
| max-width: 440px; | |
| margin-bottom: 10px; | |
| } | |
| } | |
| .simple-collection { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| } | |
| /*============================================================================ | |
| #Instagram Collection | |
| ==============================================================================*/ | |
| .instagram-collection { | |
| padding: $sectionPadding 0; | |
| header { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .instagram-container { | |
| @include grid(true); | |
| .box { | |
| @include grid-item(2); | |
| @include mediaQuery($max, $tablet) { | |
| @include grid-item(3); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(6); | |
| } | |
| &:hover, | |
| &:focus { | |
| figure { | |
| img { | |
| @include transform(scale(1.1)); | |
| } | |
| } | |
| figcaption { | |
| opacity: 1; | |
| } | |
| } | |
| figure { | |
| position: relative; | |
| overflow: hidden; | |
| img { | |
| @include transition(transform 0.2s ease-in-out); | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| } | |
| figcaption { | |
| @include transition(opacity 0.1s ease-in-out); | |
| opacity: 0; | |
| position: absolute; | |
| top: 0px; | |
| right: 0px; | |
| bottom: 0px; | |
| left: 0px; | |
| background-color: $primaryImageLabelAccentColor; | |
| background-color: rgba($primaryImageLabelAccentColor, .8); | |
| color: $primaryTextOnAccentColor; | |
| pointer-events: none; | |
| p { | |
| padding: 10px; | |
| line-height: 1.4; | |
| font-size: em(14px); | |
| position: absolute; | |
| top: 0px; | |
| bottom: 14px; | |
| overflow: hidden; | |
| @include mediaQuery($max, $tablet) { | |
| font-size: 13px; | |
| } | |
| } | |
| ul { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1; | |
| pointer-events: auto; | |
| li { | |
| display: inline-block; | |
| margin-right: 4px; | |
| &:last-child { | |
| margin-right: 0px; | |
| } | |
| a { | |
| color: $primaryTextOnAccentColor; | |
| text-decoration: none; | |
| font-family: $navFontStack; | |
| font-size: em(11px); | |
| font-weight: bold; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Page | |
| ==============================================================================*/ | |
| .page { | |
| padding: 20px 20px 60px; | |
| background: $productCollectionBackgroundColor; | |
| //border-bottom: 1px solid lighten($primaryTextColor, 50%); | |
| &.page-top { | |
| padding-bottom: 20px; | |
| } | |
| .wrapper { | |
| @if $productCollectionFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| header.page-header { | |
| h1 { | |
| text-align: center; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| text-transform: $primaryTitleTextTransform; | |
| } | |
| } | |
| h4 { | |
| font-size: em(26px); | |
| margin-bottom: 0.75em; | |
| time { | |
| font-size: em(8px); | |
| font-family: $navFontStack; | |
| text-transform: $siteHeaderNavTextTransform; | |
| display: block; | |
| } | |
| } | |
| span.smaller { | |
| font-size: em(14px); | |
| } | |
| .content-container { | |
| @include clearfix(); | |
| margin: 0 auto 20px; | |
| &.narrow { | |
| max-width: 800px; | |
| &.contact { | |
| max-width: 600px; | |
| } | |
| &.form { | |
| max-width: 440px; | |
| } | |
| } | |
| .rte { | |
| blockquote { | |
| font-style: italic; | |
| font-size: em(18px); | |
| padding: 0; | |
| margin-top: 0; | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| ul { | |
| list-style-type: disc; | |
| margin-bottom: 1em; | |
| padding-left: 2em; | |
| } | |
| } | |
| } | |
| .grid { | |
| @include grid(); | |
| } | |
| .orders-container { | |
| @include grid-item(9); | |
| } | |
| .orders { | |
| padding: 20px; | |
| background: $contentBoxBackgroundColor; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| table { | |
| width: 100%; | |
| thead { | |
| text-align: left; | |
| font-size: em(12px); | |
| color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%); | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| padding-bottom: 10px; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| th { | |
| padding-bottom: 10px; | |
| text-align: center; | |
| width: 18.333333333%; | |
| &:first-child { | |
| text-align: left; | |
| width: 35%; | |
| } | |
| &:last-child { | |
| text-align: right; | |
| width: 20%; | |
| } | |
| } | |
| } | |
| tbody { | |
| tr { | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| &:last-child { | |
| border-bottom: 0px; | |
| } | |
| td { | |
| padding: 20px 0; | |
| text-align: center; | |
| &:first-child { | |
| text-align: left; | |
| a { | |
| display: block; | |
| text-decoration: none; | |
| font-size: em(18px); | |
| } | |
| } | |
| &:last-child { | |
| text-align: right; | |
| } | |
| } | |
| } | |
| } | |
| tfoot { | |
| margin-top: 28px; | |
| td { | |
| &:first-child { | |
| width: 70%; | |
| } | |
| &:last-child { | |
| text-align: right; | |
| width: 30%; | |
| } | |
| } | |
| tr:last-child { | |
| font-size: em(18px); | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| span { | |
| color: $primaryAccentColor; | |
| } | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| font-size: 12px; | |
| } | |
| } | |
| .address { | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| padding-bottom: 20px; | |
| margin-bottom: 20px; | |
| &:last-of-type { | |
| border-bottom: 0px; | |
| margin-bottom: 0px; | |
| padding-bottom: 0px; | |
| } | |
| } | |
| .form-vertical { | |
| &.top { | |
| padding-bottom: 10px; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| } | |
| &.bottom { | |
| padding-top: 10px; | |
| margin-top: 10px; | |
| border-top: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%); | |
| } | |
| } | |
| } | |
| .account { | |
| @include grid-item(3); | |
| // padding: 20px 0; | |
| h5 { | |
| margin-bottom: 0px; | |
| font-size: em(26px); | |
| } | |
| p { | |
| line-height: 1.2; | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| .orders-container { | |
| @include grid-item(12); | |
| } | |
| .account { | |
| @include grid-item(12); | |
| margin-top: 20px; | |
| text-align: center; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Blog | |
| ==============================================================================*/ | |
| .recent-posts-collection { | |
| padding: $sectionPadding 20px; | |
| background-color: $blogBackgroundColor; | |
| {% if settings.homepage_show_borders %} | |
| border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| {% endif %} | |
| @include mediaQuery($max, $mobile) { | |
| padding: 20px; | |
| } | |
| .wrapper { | |
| @if $blogFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| } | |
| .wrapper > header { | |
| @include clearfix(); | |
| position: relative; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%); | |
| h4 { | |
| //float: left; | |
| margin: 0; | |
| line-height: 2; | |
| font-size: em(28px); | |
| text-transform: $primaryTitleTextTransform; | |
| font-weight: $primaryTitleTextWeight; | |
| } | |
| a.button.outline { | |
| position: absolute; | |
| top: 50%; | |
| right: 0; | |
| @include transform(translateY(-50%)); | |
| @include buttonOutline; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| text-align: center; | |
| a.button.outline { | |
| position: relative; | |
| @include transform(translateY(0)); | |
| } | |
| padding-bottom: 20px; | |
| } | |
| } | |
| .recent-posts-container { | |
| @include grid(); | |
| } | |
| &.layout-2 { | |
| article { | |
| @include grid-item(6); | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(12); | |
| } | |
| } | |
| } | |
| &.layout-3 { | |
| article { | |
| @include grid-item(4); | |
| @include mediaQuery($max, $tablet) { | |
| @include grid-item(6); | |
| &:nth-of-type(3n){ | |
| display: none; | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(12); | |
| &:nth-of-type(3n){ | |
| display: block; | |
| } | |
| } | |
| } | |
| } | |
| article { | |
| @extend %blog-article; | |
| header { | |
| text-align: center; | |
| } | |
| time { | |
| position: relative; | |
| top: -6px; | |
| font-family: $navFontStack; | |
| //font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-size: em(11px); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| @include grid-item(12); | |
| margin-bottom: 20px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%); | |
| &:last-of-type { | |
| padding-bottom: 0; | |
| border-bottom: 0; | |
| } | |
| } | |
| } | |
| } | |
| .blog-list, | |
| .blog-permalink { | |
| article { | |
| @extend %blog-article; | |
| margin: $sectionPadding 0 0; | |
| &:last-of-type { | |
| border-bottom: 0; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| a.button.outline { | |
| display: inline-block; | |
| @include buttonOutline; | |
| margin-top: 10px; | |
| } | |
| footer { | |
| .pagination { | |
| margin-top: 20px; | |
| } | |
| } | |
| } | |
| } | |
| .blog-list { | |
| article { | |
| margin: $sectionPadding 0; | |
| padding-bottom: 40px; | |
| } | |
| } | |
| // Extend Product Thumbnail | |
| %blog-article { | |
| header { | |
| h1, | |
| h2 { | |
| font-weight: $blogTitleTextWeight; | |
| font-size: em(40px); | |
| margin-bottom: 0; | |
| font-weight: normal; | |
| a { | |
| color: $primaryTitleColor; | |
| &:hover, | |
| &:focus { | |
| color: $primaryHoverColor; | |
| } | |
| } | |
| @include mediaQuery($max, $tablet) { | |
| font-size: em(28px); | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| font-size: em(24px); | |
| } | |
| } | |
| h5 { | |
| font-weight: $blogTitleTextWeight; | |
| font-size: em(22px); | |
| margin-bottom: 0; | |
| a { | |
| color: $primaryTextColor; | |
| &:hover { | |
| color: $primaryHoverColor; | |
| } | |
| } | |
| } | |
| p.byline { | |
| font-family: $navFontStack; | |
| //font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-size: em(11px); | |
| } | |
| } | |
| section { | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| margin: 0 auto 26px; | |
| height: auto; | |
| } | |
| p:last-of-type { | |
| margin-bottom: em(8px); | |
| } | |
| a.button.outline { | |
| margin-top: 0px; | |
| } | |
| .post-meta { | |
| margin-top: 20px; | |
| padding-top: 10px; | |
| border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| display: table; | |
| width: 100%; | |
| a.comments { | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 70%); | |
| font-family: $navFontStack; | |
| //font-weight: $siteHeaderNavTextWeight; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-size: em(12px); | |
| text-decoration: none; | |
| min-width: 120px; | |
| display: table-cell; | |
| &:hover { | |
| color: $primaryHoverColor; | |
| } | |
| } | |
| ul.tags { | |
| text-align: right; | |
| display: table-cell; | |
| li { | |
| display: inline-block; | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 70%); | |
| font-family: $navFontStack; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-size: em(12px); | |
| &:last-child { | |
| a { | |
| margin-right: 8px; | |
| } | |
| } | |
| a { | |
| @include buttonOutline; | |
| padding: 4px 0; | |
| font-size: 0.875em; | |
| border: none; | |
| box-shadow: 8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%), -8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| background-color: mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| margin-right: 8px; | |
| margin-left: 10px; | |
| &:hover { | |
| color: $primaryTextOnAccentColor; | |
| background-color: $primaryAccentColor; | |
| border-color: $primaryAccentColor; | |
| box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| footer { | |
| margin-top: 40px; | |
| .comments-container { | |
| margin: 40px 0 0; | |
| padding: 40px; | |
| border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); | |
| @include mediaQuery($max, $mobile) { | |
| padding: 40px 0; | |
| } | |
| h3 { | |
| text-align: center; | |
| text-transform: $siteHeaderTitleTextTransform; | |
| } | |
| p.form-success { | |
| text-align: center; | |
| font-size: em(14px); | |
| } | |
| .comment { | |
| padding: 20px; | |
| background: $contentBoxBackgroundColor; | |
| {% if settings.primary_dropshadow %} | |
| box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); | |
| {% endif %} | |
| font-size: em(14px); | |
| margin-bottom: 20px; | |
| p.author { | |
| margin-bottom: .5em; | |
| font-size: em(15px); | |
| span { | |
| font-weight: bold; | |
| } | |
| time { | |
| font-style: italic; | |
| } | |
| } | |
| } | |
| .pagination { | |
| margin-top: 0; | |
| } | |
| } | |
| .add-comment { | |
| padding: 0 40px; | |
| margin: 20px auto 0; | |
| max-width: 600px; | |
| h3 { | |
| text-align: center; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| padding: 0; | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #RTE (rich text editor) | |
| ==============================================================================*/ | |
| .rte { | |
| h2 { | |
| // Full width images | |
| img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| } | |
| ul { | |
| list-style-type: disc; | |
| margin: 0 0 1em 2em; | |
| } | |
| ol { | |
| list-style-type: decimal; | |
| margin: 0 0 1em 2em; | |
| } | |
| blockquote { | |
| margin: 1em 0 1em 2em; | |
| padding-left: 1em; | |
| border-left: 4px solid mix($primaryTitleColor, $primaryBackgroundColor, 50%); | |
| font-style: italic; | |
| } | |
| p.read-more { | |
| margin-top: 0.9375em; | |
| } | |
| &.centered { | |
| text-align: center; | |
| } | |
| @include word-wrap(); | |
| } | |
| /*============================================================================ | |
| #Social Share | |
| ==============================================================================*/ | |
| ul.social-share { | |
| margin-top: 20px; | |
| text-align: center; | |
| li { | |
| display: inline-block; | |
| text-align: left; | |
| margin-right: 12px; | |
| &:last-child { | |
| margin-right: 0px; | |
| } | |
| &.facebook { | |
| .fb-like > span { | |
| vertical-align: 0px !important; | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Content Util / Breadcrumbs | |
| ==============================================================================*/ | |
| // Breadcrumbs & social | |
| header.content-util { | |
| margin-bottom: $breadcrumbPaddingBottom; | |
| @include clearfix(); | |
| nav.breadcrumb { | |
| float: left; | |
| font-size: em(10px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| font-family: $navFontStack; | |
| > * { | |
| margin-right: 4px; | |
| line-height: 20px; | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| a { | |
| text-decoration: none; | |
| color: $primaryTextColor; | |
| &:hover, | |
| &:focus { | |
| color: $primaryAccentColor; | |
| } | |
| &.current, | |
| &.current:hover, | |
| &.current:focus { | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 50%); | |
| cursor: default; | |
| } | |
| } | |
| span { | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 50%); | |
| cursor: default; | |
| } | |
| } | |
| ul.social-icons { | |
| float: right; | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| text-align: center; | |
| nav.breadcrumb, | |
| ul.social-icons { | |
| float: none; | |
| } | |
| nav.breadcrumb { | |
| font-size: em(12px); | |
| } | |
| ul.social-icons { | |
| display: none; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Forms | |
| ==============================================================================*/ | |
| .selection-wrapper { | |
| label { | |
| font-size: em(10px); | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 70%); | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| margin-bottom: 4px; | |
| font-family: $navFontStack; | |
| } | |
| select { | |
| &.minimal-select { | |
| margin: 0; | |
| padding: 0; | |
| border: 0px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| min-width: 48px; | |
| margin-left: 4px; | |
| } | |
| &.full-select { | |
| width: 100%; | |
| height: 30px; | |
| margin: 0; | |
| border: 0px; | |
| outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| outline-offset: -2px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| } | |
| &:focus { | |
| outline-color: $primaryAccentColor; | |
| } | |
| } | |
| .input-row { | |
| margin-bottom: 10px; | |
| label { | |
| display: block; | |
| } | |
| input, | |
| textarea { | |
| width: 100%; | |
| margin: 0; | |
| padding: 6px; | |
| border: 0px; | |
| outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| outline-offset: -2px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| background-color: transparent; | |
| &:focus { | |
| outline-color: $primaryAccentColor; | |
| } | |
| } | |
| input { | |
| height: 30px; | |
| } | |
| textarea { | |
| min-height: 120px; | |
| } | |
| } | |
| .input-col { | |
| @include grid-item(6); | |
| } | |
| h2 { | |
| text-align: center; | |
| margin-bottom: 0; | |
| } | |
| div.errors { | |
| text-align: center; | |
| font-size: em(14px); | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| color: red; | |
| ul { | |
| list-style-type: none; | |
| } | |
| } | |
| input.required, | |
| select.required { | |
| outline: 2px solid red; | |
| } | |
| p { | |
| text-align: center; | |
| font-size: em(14px); | |
| margin-top: 10px; | |
| &.submit { | |
| margin-top: 24px; | |
| } | |
| } | |
| button.button, | |
| input.button { | |
| width: 100%; | |
| padding: 8px 0; | |
| background: $primaryAccentColor; | |
| color: $primaryTextOnAccentColor; | |
| border: 0; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-weight: $siteHeaderNavTextWeight; | |
| &:hover, | |
| &:focus, | |
| &.added { | |
| background: $primaryHoverColor; | |
| } | |
| &.disabled { | |
| background: mix($primaryTextColor, $primaryBackgroundColor, 50%); | |
| } | |
| } | |
| a.cancel { | |
| margin-top: 10px; | |
| display: block; | |
| text-decoration: none; | |
| font-style: italic; | |
| text-align: center; | |
| color: mix($primaryTextColor, $primaryBackgroundColor, 50%); | |
| } | |
| } | |
| select { | |
| &.minimal-select { | |
| margin: 0; | |
| padding: 0; | |
| border: 0px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| min-width: 48px; | |
| margin-left: 4px; | |
| } | |
| &.full-select { | |
| width: 100%; | |
| height: 30px; | |
| margin: 0; | |
| border: 0px; | |
| outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| outline-offset: -2px; | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| } | |
| } | |
| .quantity-select { | |
| position: relative; | |
| max-width: 440px; | |
| margin: 0 auto; | |
| display: table; | |
| border-collapse: collapse; | |
| width: 100%; | |
| .input-wrapper { | |
| display: table-cell; | |
| } | |
| .button-wrapper { | |
| display: table-cell; | |
| } | |
| input { | |
| width: 48px; | |
| text-align: center; | |
| vertical-align: top; | |
| margin: 0 4px; | |
| } | |
| button { | |
| width: 30px; | |
| } | |
| button, | |
| input { | |
| @include box-sizing(border-box); | |
| height: 28px; | |
| border: 0px; | |
| border: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%); | |
| font-family: $navFontStack; | |
| font-size: em(12px); | |
| text-transform: $siteHeaderNavTextTransform; | |
| background: transparent; | |
| &:focus { | |
| outline-color: $primaryAccentColor; | |
| } | |
| } | |
| } | |
| input { | |
| background: transparent; | |
| } | |
| /*============================================================================ | |
| #Site Footer | |
| ==============================================================================*/ | |
| footer.site-footer { | |
| padding: $sectionPadding*2 40px $sectionPadding; | |
| color: $footerTextColor; | |
| background-color: $footerBackgroundColor; | |
| text-align: $footerTextAlignment; | |
| @include mediaQuery($max, $tablet) { | |
| padding: 40px 20px; | |
| } | |
| .wrapper { | |
| @if $footerFullWidth { | |
| @include outer-container(); | |
| } @else { | |
| @include outer-container($siteWidth); | |
| } | |
| border-top: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%); | |
| padding-top: 20px; | |
| } | |
| .grid { | |
| @include grid(); | |
| margin-bottom: 20px; | |
| } | |
| .box { | |
| @include grid-item(3); | |
| &.payment-types { | |
| @include grid-item(12); | |
| padding-top: 20px; | |
| p { | |
| color: $footerTextColor; | |
| font-family: $navFontStack; | |
| font-size: em(14px); | |
| margin-bottom: 6px; | |
| } | |
| li { | |
| display: inline-block; | |
| } | |
| img { | |
| max-width: 40px; | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| } | |
| @include mediaQuery($max, "940px") { | |
| &.newsletter { | |
| @include grid-item(12); | |
| margin-bottom: 20px; | |
| .offer-email { | |
| border-bottom: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%); | |
| padding-bottom: 20px; | |
| } | |
| } | |
| &.social { | |
| @include grid-item(12); | |
| margin-top: 20px; | |
| > *:first-child { | |
| padding-top: 20px; | |
| border-top: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%); | |
| } | |
| } | |
| &.quick-links { | |
| @include grid-item(6); | |
| } | |
| &.custom { | |
| @include grid-item(6); | |
| } | |
| &.payment-types { | |
| border-top: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%); | |
| } | |
| } | |
| @include mediaQuery($max, $mobile) { | |
| &.quick-links { | |
| @include grid-item(12); | |
| padding-bottom: 20px; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%); | |
| } | |
| &.custom { | |
| @include grid-item(12); | |
| } | |
| } | |
| } | |
| h4 { | |
| font-size: em(20px); | |
| text-transform: $primaryTitleTextTransform; | |
| color: $footerTitleTextColor; | |
| font-weight: 600; | |
| } | |
| p { | |
| font-size: em(14px); | |
| &.copyright { | |
| margin-top: em(16px); | |
| a { | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| a { | |
| color: $footerNavTextColor; | |
| &:hover, | |
| &:focus { | |
| opacity: 0.8; | |
| } | |
| &:focus { | |
| outline-color: $footerNavTextColor; | |
| } | |
| } | |
| input, | |
| button { | |
| &:focus { | |
| outline-color: $footerNavTextColor; | |
| } | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| li { | |
| line-height: 1.4; | |
| a { | |
| color: $footerNavTextColor; | |
| font-family: $navFontStack; | |
| text-decoration: none; | |
| font-size: em(14px); | |
| &:hover, | |
| &:focus { | |
| opacity: 0.8; | |
| } | |
| } | |
| } | |
| &.social-icons { | |
| li { | |
| display: inline-block; | |
| margin-right: 10px; | |
| font-size: em(30px); | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| a { | |
| display: block; | |
| &:hover, | |
| &:focus { | |
| color: $footerNavTextColor; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| form { | |
| margin: 0 auto; | |
| max-width: 400px; | |
| display: table; | |
| width: 100%; | |
| border-collapse: collapse; | |
| height: 44px; | |
| .input-wrapper { | |
| display: table-cell; | |
| width: 100%; | |
| input { | |
| width: 100%; | |
| } | |
| } | |
| .button-wrapper { | |
| display: table-cell; | |
| width: 1%; | |
| vertical-align: middle; | |
| font-size: 0; | |
| } | |
| } | |
| input { | |
| border: 2px solid $footerNavTextColor; | |
| padding: 8px 8px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: $footerNavTextColor; | |
| background-color: transparent; | |
| height: 44px; | |
| @include placeholder { | |
| color: $footerTextColor; | |
| } | |
| } | |
| button { | |
| padding: 10px; | |
| background-color: $footerNavTextColor; | |
| border: 2px solid $footerNavTextColor; | |
| color: $footerBackgroundColor; | |
| font-size: 11px; | |
| text-transform: $siteHeaderNavTextTransform; | |
| font-family: $navFontStack; | |
| border: 0; | |
| display: inline-block; | |
| margin-left: 6px; | |
| height: 44px; | |
| @include no-word-wrap(); | |
| &:hover, | |
| &:focus { | |
| opacity: 0.8; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Conditional Old IE Fixes | |
| ==============================================================================*/ | |
| // Below IE9 | |
| html.lt-ie9 { | |
| // @media \0screen {img { width: auto }} | |
| .featured-collection .box.header .details { | |
| position: static; | |
| top: auto; | |
| @include transform(translateY(0)); | |
| } | |
| .featured-collection .box.header { | |
| height: auto !important; | |
| } | |
| .collection aside nav.tags ul { | |
| padding-left: 0px; | |
| } | |
| .collection aside nav.tags li a, | |
| .blog-list article section .post-meta ul.tags li a, | |
| .blog-permalink article section .post-meta ul.tags li a { | |
| padding: 4px 8px; | |
| margin-right: 0; | |
| } | |
| .blog-list article section .post-meta ul.tags li.label, | |
| .blog-permalink article section .post-meta ul.tags li.label { | |
| margin-right: 4px; | |
| } | |
| footer.site-footer .box.payment-types { | |
| display: none; | |
| } | |
| } | |
| // Below IE10 | |
| html.lt-ie9, | |
| html.ie9 { | |
| select { | |
| background-image: none; | |
| padding: 0; | |
| } | |
| } | |
| // IE10 and below | |
| html.lt-ie9, | |
| html.ie9, | |
| html[data-useragent*='MSIE 10.0'], | |
| html[data-useragent*='Windows 11.0'] { | |
| } | |
| // No JS | |
| html.no-js { | |
| .quantity-select button.adjust { | |
| display: none; | |
| } | |
| .js-flickity { | |
| .cell-content { | |
| visibility: visible !important; | |
| } | |
| } | |
| ul.site-nav { | |
| li.has-dropdown:hover { | |
| ul.dropdown { | |
| display: block !important; | |
| } | |
| } | |
| } | |
| } | |
| body .helper-section { | |
| &:hover, | |
| &:focus { | |
| .box { | |
| opacity: 0.5; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| // Vendors | |
| ==============================================================================*/ | |
| /*============================================================================ | |
| #Big Slide | |
| ==============================================================================*/ | |
| /*! bigSlide.js | |
| http://ascott1.github.io/bigSlide.js/ | |
| ---------------------------------------------- */ | |
| .push { | |
| position: relative; | |
| } | |
| .panel { | |
| display: none; | |
| position: fixed; | |
| left: -220px; /*left or right and the width of your navigation panel*/ | |
| width: 220px; /*should match the above value*/ | |
| padding: 40px 0 40px; | |
| font-size: em(14px); | |
| background: $siteBorderColor; | |
| color: $siteBorderTextColor; | |
| font-family: $navFontStack; | |
| overflow-x: scroll; | |
| a { | |
| color: $siteBorderTextColor; | |
| text-decoration: none; | |
| &:focus { | |
| outline-color: $footerNavTextColor; | |
| } | |
| } | |
| ul.site-nav { | |
| li { | |
| margin: 4px 0; | |
| border-bottom: 1px solid mix($siteBorderTextColor, $siteBorderColor, 20%); | |
| a { | |
| display: block; | |
| padding: 6px 10px; | |
| } | |
| &.active > a { | |
| font-weight: 600; | |
| } | |
| } | |
| ul.dropdown { | |
| li { | |
| font-size: em(14px); | |
| border-bottom: 0px; | |
| a { | |
| padding: 6px 10px 6px 24px; | |
| } | |
| } | |
| } | |
| } | |
| .search { | |
| padding: 20px 16px 20px 10px; | |
| border-bottom: 1px solid mix($siteBorderTextColor, $siteBorderColor, 20%); | |
| form { | |
| display: table; | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .icon-wrapper { | |
| width: 20px; | |
| display: table-cell; | |
| padding-right: 6px; | |
| vertical-align: top; | |
| } | |
| .input-wrapper { | |
| display: table-cell; | |
| width: 100%; | |
| input { | |
| border: 2px solid mix($siteBorderTextColor, $siteBorderColor, 80%); | |
| width: 100%; | |
| padding: 0px 4px; | |
| color: $siteBorderTextColor; | |
| font-size: em(15px); | |
| @include placeholder { | |
| color: mix($siteBorderTextColor, $siteBorderColor, 50%); | |
| } | |
| &:focus { | |
| border: 2px solid $siteBorderTextColor; | |
| outline: none; | |
| } | |
| } | |
| } | |
| .button-wrapper { | |
| display: none; | |
| } | |
| } | |
| .account { | |
| padding: 10px 0; | |
| li { | |
| display: block; | |
| margin: 6px 0; | |
| a { | |
| padding: 6px 10px; | |
| } | |
| } | |
| } | |
| } | |
| .panel-open { | |
| overflow: hidden; | |
| } | |
| /*============================================================================ | |
| #Flickity | |
| ==============================================================================*/ | |
| /*! Flickity v1.0.2 | |
| http://flickity.metafizzy.co | |
| ---------------------------------------------- */ | |
| .flickity-enabled { | |
| position: relative; | |
| } | |
| .flickity-enabled:focus { outline: none; } | |
| .flickity-viewport { | |
| overflow: hidden; | |
| position: relative; | |
| height: 100%; | |
| } | |
| .flickity-slider { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* draggable */ | |
| .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; | |
| } | |
| /* ---- previous/next buttons ---- */ | |
| .flickity-prev-next-button { | |
| position: absolute; | |
| top: 50%; | |
| width: 44px; | |
| height: 44px; | |
| border: none; | |
| border-radius: 50%; | |
| background: white; | |
| background: hsla(0, 0%, 100%, 0.75); | |
| cursor: pointer; | |
| /* vertically center */ | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| .flickity-prev-next-button:hover { background: white; } | |
| .flickity-prev-next-button:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 5px #09F; | |
| } | |
| .flickity-prev-next-button:active { | |
| filter: alpha(opacity=60); /* IE8 */ | |
| opacity: 0.6; | |
| } | |
| .flickity-prev-next-button.previous { left: 10px; } | |
| .flickity-prev-next-button.next { right: 10px; } | |
| /* right to left */ | |
| .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:disabled { | |
| filter: alpha(opacity=30); /* IE8 */ | |
| opacity: 0.3; | |
| cursor: auto; | |
| } | |
| .flickity-prev-next-button svg { | |
| position: absolute; | |
| left: 20%; | |
| top: 20%; | |
| width: 60%; | |
| height: 60%; | |
| } | |
| .flickity-prev-next-button .arrow { | |
| fill: #333; | |
| } | |
| /* color & size if no SVG - IE8 and Android 2.3 */ | |
| .flickity-prev-next-button.no-svg { | |
| color: #333; | |
| font-size: 26px; | |
| } | |
| /* ---- page dots ---- */ | |
| .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: mix($primaryTextColor, $primaryBackgroundColor, 40%);; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .flickity-page-dots .dot.is-selected { | |
| background: $primaryAccentColor; | |
| } | |
| /*============================================================================ | |
| #Magnific | |
| ==============================================================================*/ | |
| /* Magnific Popup CSS */ | |
| //////////////////////// | |
| // Settings // | |
| //////////////////////// | |
| // overlay | |
| $mfp-overlay-color: #0b0b0b; // Color of overlay screen | |
| $mfp-overlay-opacity: 0.8; // Opacity of overlay screen | |
| $mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe | |
| // spacing | |
| $mfp-popup-padding-left: 8px; // Padding from left and from right side | |
| $mfp-popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px | |
| $mfp-z-index-base: 1040; // Base z-index of popup | |
| // controls | |
| $mfp-include-arrows: true; // Include styles for nav arrows | |
| $mfp-controls-opacity: 0.65; // Opacity of controls | |
| $mfp-controls-color: #FFF; // Color of controls | |
| $mfp-controls-border-color: #3F3F3F; // Border color of controls | |
| $mfp-inner-close-icon-color: #333; // Color of close button when inside | |
| $mfp-controls-text-color: #CCC; // Color of preloader and "1 of X" indicator | |
| $mfp-controls-text-color-hover: #FFF; // Hover color of preloader and "1 of X" indicator | |
| $mfp-IE7support: true; // Very basic IE7 support | |
| // Iframe-type options | |
| $mfp-include-iframe-type: true; // Enable Iframe-type popups | |
| $mfp-iframe-padding-top: 40px; // Iframe padding top | |
| $mfp-iframe-background: #000; // Background color of iframes | |
| $mfp-iframe-max-width: 900px; // Maximum width of iframes | |
| $mfp-iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) | |
| // Image-type options | |
| $mfp-include-image-type: true; // Enable Image-type popups | |
| $mfp-image-background: #444 !default; | |
| $mfp-image-padding-top: 40px; // Image padding top | |
| $mfp-image-padding-bottom: 40px; // Image padding bottom | |
| $mfp-include-mobile-layout-for-image: true; // Removes paddings from top and bottom | |
| // Image caption options | |
| $mfp-caption-title-color: #F3F3F3; // Caption title color | |
| $mfp-caption-subtitle-color: #BDBDBD; // Caption subtitle color | |
| // A11y | |
| $mfp-use-visuallyhidden: false; | |
| //////////////////////// | |
| // | |
| // Contents: | |
| // | |
| // 1. Default Settings | |
| // 2. General styles | |
| // - Transluscent overlay | |
| // - Containers, wrappers | |
| // - Cursors | |
| // - Helper classes | |
| // 3. Appearance | |
| // - Preloader & text that displays error messages | |
| // - CSS reset for buttons | |
| // - Close icon | |
| // - "1 of X" counter | |
| // - Navigation (left/right) arrows | |
| // - Iframe content type styles | |
| // - Image content type styles | |
| // - Media query where size of arrows is reduced | |
| // - IE7 support | |
| // | |
| //////////////////////// | |
| //////////////////////// | |
| // 1. Default Settings | |
| //////////////////////// | |
| $mfp-overlay-color: #0b0b0b !default; | |
| $mfp-overlay-opacity: 0.8 !default; | |
| $mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe | |
| $mfp-popup-padding-left: 8px !default; // Padding from left and from right side | |
| $mfp-popup-padding-left-mobile: 6px !default; // Same as above, but is applied when width of window is less than 800px | |
| $mfp-z-index-base: 1040 !default; // Base z-index of popup | |
| $mfp-include-arrows: true !default; // include styles for nav arrows | |
| $mfp-controls-opacity: 0.65 !default; | |
| $mfp-controls-color: #FFF !default; | |
| $mfp-controls-border-color: #3F3F3F !default; | |
| $mfp-inner-close-icon-color: #333 !default; | |
| $mfp-controls-text-color: #CCC !default; // Color of preloader and "1 of X" indicator | |
| $mfp-controls-text-color-hover: #FFF !default; | |
| $mfp-IE7support: true !default; // Very basic IE7 support | |
| // Iframe-type options | |
| $mfp-include-iframe-type: true !default; | |
| $mfp-iframe-padding-top: 40px !default; | |
| $mfp-iframe-background: #000 !default; | |
| $mfp-iframe-max-width: 900px !default; | |
| $mfp-iframe-ratio: 9/16 !default; | |
| // Image-type options | |
| $mfp-include-image-type: true !default; | |
| $mfp-image-background: #444 !default; | |
| $mfp-image-padding-top: 40px !default; | |
| $mfp-image-padding-bottom: 40px !default; | |
| $mfp-include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom | |
| // Image caption options | |
| $mfp-caption-title-color: #F3F3F3 !default; | |
| $mfp-caption-subtitle-color: #BDBDBD !default; | |
| // A11y | |
| $mfp-use-visuallyhidden: false !default; // Hide content from browsers, but make it available for screen readers | |
| //////////////////////// | |
| // 2. General styles | |
| //////////////////////// | |
| // Transluscent overlay | |
| .mfp-bg { | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: $mfp-z-index-base + 2; | |
| overflow: hidden; | |
| position: fixed; | |
| background: $mfp-overlay-color; | |
| opacity: $mfp-overlay-opacity; | |
| @if $mfp-IE7support { | |
| filter: unquote("alpha(opacity=#{$mfp-overlay-opacity*100})"); | |
| } | |
| } | |
| // Wrapper for popup | |
| .mfp-wrap { | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: $mfp-z-index-base + 3; | |
| position: fixed; | |
| outline: none !important; | |
| -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar | |
| } | |
| // Root container | |
| .mfp-container { | |
| text-align: center; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| left: 0; | |
| top: 0; | |
| padding: 0 $mfp-popup-padding-left; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| // Vertical centerer helper | |
| .mfp-container { | |
| &:before { | |
| content: ''; | |
| display: inline-block; | |
| height: 100%; | |
| vertical-align: middle; | |
| } | |
| } | |
| // Remove vertical centering when popup has class `mfp-align-top` | |
| .mfp-align-top { | |
| .mfp-container { | |
| &:before { | |
| display: none; | |
| } | |
| } | |
| } | |
| // Popup content holder | |
| .mfp-content { | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin: 0 auto; | |
| text-align: left; | |
| z-index: $mfp-z-index-base + 5; | |
| } | |
| .mfp-inline-holder, | |
| .mfp-ajax-holder { | |
| .mfp-content { | |
| width: 100%; | |
| cursor: auto; | |
| } | |
| } | |
| // Cursors | |
| .mfp-ajax-cur { | |
| cursor: progress; | |
| } | |
| .mfp-zoom-out-cur { | |
| &, .mfp-image-holder .mfp-close { | |
| cursor: -moz-zoom-out; | |
| cursor: -webkit-zoom-out; | |
| cursor: zoom-out; | |
| } | |
| } | |
| .mfp-zoom { | |
| cursor: pointer; | |
| cursor: -webkit-zoom-in; | |
| cursor: -moz-zoom-in; | |
| cursor: zoom-in; | |
| } | |
| .mfp-auto-cursor { | |
| .mfp-content { | |
| cursor: auto; | |
| } | |
| } | |
| .mfp-close, | |
| .mfp-arrow, | |
| .mfp-preloader, | |
| .mfp-counter { | |
| -webkit-user-select:none; | |
| -moz-user-select: none; | |
| user-select: none; | |
| } | |
| // Hide the image during the loading | |
| .mfp-loading { | |
| &.mfp-figure { | |
| display: none; | |
| } | |
| } | |
| // Helper class that hides stuff | |
| @if $mfp-use-visuallyhidden { | |
| // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden | |
| .mfp-hide { | |
| border: 0 !important; | |
| clip: rect(0 0 0 0) !important; | |
| height: 1px !important; | |
| margin: -1px !important; | |
| overflow: hidden !important; | |
| padding: 0 !important; | |
| position: absolute !important; | |
| width: 1px !important; | |
| } | |
| } @else { | |
| .mfp-hide { | |
| display: none !important; | |
| } | |
| } | |
| //////////////////////// | |
| // 3. Appearance | |
| //////////////////////// | |
| // Preloader and text that displays error messages | |
| .mfp-preloader { | |
| color: $mfp-controls-text-color; | |
| position: absolute; | |
| top: 50%; | |
| width: auto; | |
| text-align: center; | |
| margin-top: -0.8em; | |
| left: 8px; | |
| right: 8px; | |
| z-index: $mfp-z-index-base + 4; | |
| a { | |
| color: $mfp-controls-text-color; | |
| &:hover { | |
| color: $mfp-controls-text-color-hover; | |
| } | |
| } | |
| } | |
| // Hide preloader when content successfully loaded | |
| .mfp-s-ready { | |
| .mfp-preloader { | |
| display: none; | |
| } | |
| } | |
| // Hide content when it was not loaded | |
| .mfp-s-error { | |
| .mfp-content { | |
| display: none; | |
| } | |
| } | |
| // CSS-reset for buttons | |
| button { | |
| &.mfp-close, | |
| &.mfp-arrow { | |
| overflow: visible; | |
| cursor: pointer; | |
| background: transparent; | |
| border: 0; | |
| -webkit-appearance: none; | |
| display: block; | |
| outline: none; | |
| padding: 0; | |
| z-index: $mfp-z-index-base + 6; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| &::-moz-focus-inner { | |
| padding: 0; | |
| border: 0 | |
| } | |
| } | |
| // Close icon | |
| .mfp-close { | |
| width: 44px; | |
| height: 44px; | |
| line-height: 44px; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| text-decoration: none; | |
| text-align: center; | |
| opacity: $mfp-controls-opacity; | |
| @if $mfp-IE7support { | |
| filter: unquote("alpha(opacity=#{$mfp-controls-opacity*100})"); | |
| } | |
| padding: 0 0 18px 10px; | |
| color: $mfp-controls-color; | |
| font-style: normal; | |
| font-size: 28px; | |
| font-family: Arial, Baskerville, monospace; | |
| &:hover, | |
| &:focus { | |
| opacity: 1; | |
| @if $mfp-IE7support { | |
| filter: unquote("alpha(opacity=#{1*100})"); | |
| } | |
| } | |
| &:active { | |
| top: 1px; | |
| } | |
| } | |
| .mfp-close-btn-in { | |
| .mfp-close { | |
| color: $mfp-inner-close-icon-color; | |
| } | |
| } | |
| .mfp-image-holder, | |
| .mfp-iframe-holder { | |
| .mfp-close { | |
| color: $mfp-controls-color; | |
| right: -6px; | |
| text-align: right; | |
| padding-right: 6px; | |
| width: 100%; | |
| } | |
| } | |
| // "1 of X" counter | |
| .mfp-counter { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| color: $mfp-controls-text-color; | |
| font-size: 12px; | |
| line-height: 18px; | |
| white-space: nowrap; | |
| } | |
| // Navigation arrows | |
| @if $mfp-include-arrows { | |
| .mfp-arrow { | |
| position: absolute; | |
| opacity: $mfp-controls-opacity; | |
| @if $mfp-IE7support { | |
| filter: unquote("alpha(opacity=#{$mfp-controls-opacity*100})"); | |
| } | |
| margin: 0; | |
| top: 50%; | |
| margin-top: -55px; | |
| padding: 0; | |
| width: 90px; | |
| height: 110px; | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| &:active { | |
| margin-top: -54px; | |
| } | |
| &:hover, | |
| &:focus { | |
| opacity: 1; | |
| @if $mfp-IE7support { | |
| filter: unquote("alpha(opacity=#{1*100})"); | |
| } | |
| } | |
| &:before, | |
| &:after, | |
| .mfp-b, | |
| .mfp-a { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 0; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| margin-top: 35px; | |
| margin-left: 35px; | |
| border: medium inset transparent; | |
| } | |
| &:after, | |
| .mfp-a { | |
| border-top-width: 13px; | |
| border-bottom-width: 13px; | |
| top:8px; | |
| } | |
| &:before, | |
| .mfp-b { | |
| border-top-width: 21px; | |
| border-bottom-width: 21px; | |
| opacity: 0.7; | |
| } | |
| } | |
| .mfp-arrow-left { | |
| left: 0; | |
| &:after, | |
| .mfp-a { | |
| border-right: 17px solid $mfp-controls-color; | |
| margin-left: 31px; | |
| } | |
| &:before, | |
| .mfp-b { | |
| margin-left: 25px; | |
| border-right: 27px solid $mfp-controls-border-color; | |
| } | |
| } | |
| .mfp-arrow-right { | |
| right: 0; | |
| &:after, | |
| .mfp-a { | |
| border-left: 17px solid $mfp-controls-color; | |
| margin-left: 39px | |
| } | |
| &:before, | |
| .mfp-b { | |
| border-left: 27px solid $mfp-controls-border-color; | |
| } | |
| } | |
| } | |
| // Iframe content type | |
| @if $mfp-include-iframe-type { | |
| .mfp-iframe-holder { | |
| padding-top: $mfp-iframe-padding-top; | |
| padding-bottom: $mfp-iframe-padding-top; | |
| .mfp-content { | |
| line-height: 0; | |
| width: 100%; | |
| max-width: $mfp-iframe-max-width; | |
| } | |
| .mfp-close { | |
| top: -40px; | |
| } | |
| } | |
| .mfp-iframe-scaler { | |
| width: 100%; | |
| height: 0; | |
| overflow: hidden; | |
| padding-top: $mfp-iframe-ratio * 100%; | |
| iframe { | |
| position: absolute; | |
| display: block; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| box-shadow: $mfp-shadow; | |
| background: $mfp-iframe-background; | |
| } | |
| } | |
| } | |
| // Image content type | |
| @if $mfp-include-image-type { | |
| /* Main image in popup */ | |
| img { | |
| &.mfp-img { | |
| width: auto; | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| line-height: 0; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| padding: $mfp-image-padding-top 0 $mfp-image-padding-bottom; | |
| margin: 0 auto; | |
| } | |
| } | |
| /* The shadow behind the image */ | |
| .mfp-figure { | |
| line-height: 0; | |
| &:after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: $mfp-image-padding-top; | |
| bottom: $mfp-image-padding-bottom; | |
| display: block; | |
| right: 0; | |
| width: auto; | |
| height: auto; | |
| z-index: -1; | |
| box-shadow: $mfp-shadow; | |
| background: $mfp-image-background; | |
| } | |
| small { | |
| color: $mfp-caption-subtitle-color; | |
| display: block; | |
| font-size: 12px; | |
| line-height: 14px; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| } | |
| .mfp-bottom-bar { | |
| margin-top: -$mfp-image-padding-bottom + 4; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| cursor: auto; | |
| } | |
| .mfp-title { | |
| text-align: left; | |
| line-height: 18px; | |
| color: $mfp-caption-title-color; | |
| word-wrap: break-word; | |
| padding-right: 36px; // leave some space for counter at right side | |
| } | |
| .mfp-image-holder { | |
| .mfp-content { | |
| max-width: 100%; | |
| } | |
| } | |
| .mfp-gallery { | |
| .mfp-image-holder { | |
| .mfp-figure { | |
| cursor: pointer; | |
| } | |
| } | |
| } | |
| @if $mfp-include-mobile-layout-for-image { | |
| @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { | |
| /** | |
| * Remove all paddings around the image on small screen | |
| */ | |
| .mfp-img-mobile { | |
| .mfp-image-holder { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| img { | |
| &.mfp-img { | |
| padding: 0; | |
| } | |
| } | |
| .mfp-figure { | |
| // The shadow behind the image | |
| &:after { | |
| top: 0; | |
| bottom: 0; | |
| } | |
| small { | |
| display: inline; | |
| margin-left: 5px; | |
| } | |
| } | |
| .mfp-bottom-bar { | |
| background: rgba(0,0,0,0.6); | |
| bottom: 0; | |
| margin: 0; | |
| top: auto; | |
| padding: 3px 5px; | |
| position: fixed; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| &:empty { | |
| padding: 0; | |
| } | |
| } | |
| .mfp-counter { | |
| right: 5px; | |
| top: 3px; | |
| } | |
| .mfp-close { | |
| top: 0; | |
| right: 0; | |
| width: 35px; | |
| height: 35px; | |
| line-height: 35px; | |
| background: rgba(0, 0, 0, 0.6); | |
| position: fixed; | |
| text-align: center; | |
| padding: 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Scale navigation arrows and reduce padding from sides | |
| @media all and (max-width: 900px) { | |
| .mfp-arrow { | |
| -webkit-transform: scale(0.75); | |
| transform: scale(0.75); | |
| } | |
| .mfp-arrow-left { | |
| -webkit-transform-origin: 0; | |
| transform-origin: 0; | |
| } | |
| .mfp-arrow-right { | |
| -webkit-transform-origin: 100%; | |
| transform-origin: 100%; | |
| } | |
| .mfp-container { | |
| padding-left: $mfp-popup-padding-left-mobile; | |
| padding-right: $mfp-popup-padding-left-mobile; | |
| } | |
| } | |
| // IE7 support | |
| // Styles that make popup look nicier in old IE | |
| @if $mfp-IE7support { | |
| .mfp-ie7 { | |
| .mfp-img { | |
| padding: 0; | |
| } | |
| .mfp-bottom-bar { | |
| width: 600px; | |
| left: 50%; | |
| margin-left: -300px; | |
| margin-top: 5px; | |
| padding-bottom: 5px; | |
| } | |
| .mfp-container { | |
| padding: 0; | |
| } | |
| .mfp-content { | |
| padding-top: 44px; | |
| } | |
| .mfp-close { | |
| top: 0; | |
| right: 0; | |
| padding-top: 0; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment