Created
February 21, 2018 04:39
-
-
Save whistlerbrad/cf5327fb90f1f54a9c14548c242aaf9b to your computer and use it in GitHub Desktop.
Pipeline 3.0
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
| @charset "UTF-8"; | |
| /*============================================================================ | |
| ============= Pipeline theme is built on Timber 2.0.2 ====================== | |
| ============================================================================ | |
| Shopify Timber v2.0.2 | |
| Copyright 2015 Shopify Inc. | |
| Author Carson Shold @cshold | |
| Built with Sass - http://sass-lang.com/ | |
| 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 | |
| - Helpers variables, mixins, and starter classes are provided. Change as needed. | |
| - The file is prepped with a CSS reset | |
| - The font icons are prepared using https://icomoon.io/app | |
| ============================================================================== | |
| Table of Contents | |
| #Breakpoint and Grid Variables | |
| #General Variables | |
| #Typography | |
| #Sass Mixins | |
| #Normalize | |
| #Grid Setup | |
| #Basic Styles | |
| #Helper Classes | |
| #Rich Text Editor | |
| #Links and Buttons | |
| #Lists | |
| #Tables | |
| #OOCSS Media Object | |
| #Images and Iframes | |
| #Forms | |
| #Icons | |
| #Pagination | |
| #Site Header | |
| #Site Nav and Dropdowns | |
| #Site Footer | |
| #Product and Collection Grids | |
| #Collections | |
| #Breadcrumbs | |
| #Product Page | |
| #Blogs and Comments | |
| #Notes and Form Feedback | |
| #Cart Page | |
| ==============================================================================*/ | |
| /*============================================================================ | |
| #Breakpoint and Grid Variables | |
| ==============================================================================*/ | |
| $viewportIncrement: 1px; | |
| $small: 480px; | |
| $medium: 768px; | |
| $large: 769px; | |
| $postSmall: $small + $viewportIncrement; | |
| $preMedium: $medium - $viewportIncrement; | |
| $preLarge: $large - $viewportIncrement; | |
| /*================ The following are dependencies of csswizardry grid ================*/ | |
| $breakpoints: ( | |
| 'small' '(max-width: #{$small})', | |
| 'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})', | |
| 'medium-down' '(max-width: #{$medium})', | |
| 'large' '(min-width: #{$large})' | |
| ); | |
| $breakpoint-has-widths: ('small', 'medium', 'medium-down', 'large'); | |
| $breakpoint-has-push: ('medium', 'medium-down', 'large'); | |
| $breakpoint-has-pull: ('medium', 'medium-down', 'large'); | |
| /*============================================================================ | |
| #General Variables | |
| ==============================================================================*/ | |
| // Main Colors | |
| $colorPrimary: {{ settings.color_primary }}; | |
| $colorSplash: {{ settings.color_splash }}; | |
| // Text link colors | |
| $colorLink: $colorPrimary; | |
| $colorLinkHover: lighten($colorPrimary, 15%); | |
| // Text colors | |
| $colorTextBody: {{ settings.color_body_text }}; | |
| // Backgrounds | |
| $colorBody: {{ settings.color_body_bg }}; | |
| // Border colors | |
| $colorBorder: {{ settings.color_border }}; | |
| // Account Bar | |
| $colorInfoBg: {{ settings.color_account_bg }}; | |
| $colorInfoText: {{ settings.color_account_text }}; | |
| // Nav and dropdown link background | |
| $colorNav: {{ settings.color_header_bg }}; | |
| $colorNavText: {{ settings.color_header_text }}; | |
| $colorNavBorder: $colorInfoBg; | |
| // Site Footer | |
| $colorFooterBg: {{ settings.color_footer_bg }}; | |
| $colorFooterText: {{ settings.color_footer_text }}; | |
| // Homepage | |
| $colorHomeDark: {{ settings.homepage_background_dark }}; | |
| $colorHomeLight: {{ settings.homepage_background_light }}; | |
| // Button colors | |
| $colorBtnPrimary: $colorPrimary; | |
| $colorBtnPrimaryHover: darken($colorPrimary, 10%); | |
| $colorBtnPrimaryActive: darken($colorPrimary, 5%); | |
| $colorBtnPrimaryText: $colorBody; | |
| $colorBtnSecondary: $colorBody; | |
| $colorBtnSecondaryHover: lighten($colorSplash, 10%); | |
| $colorBtnSecondaryActive: lighten($colorSplash, 5%); | |
| $colorBtnSecondaryText: $colorTextBody; | |
| // Helper colors | |
| $disabledGrey: rgba(#000, 0.3); | |
| $disabledBorder: darken($disabledGrey, 25%); | |
| $errorRed: #d02e2e; | |
| $errorRedBg: #fff6f6; | |
| $successGreen: #56ad6a; | |
| $successGreenBg: #ecfef0; | |
| // Sizing variables | |
| $siteWidth: 1180px; | |
| $gutter: 30px; | |
| $gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it | |
| $radius: 2px; | |
| /*============================================================================ | |
| #Sass Mixins | |
| ==============================================================================*/ | |
| .clearfix { | |
| &:after { | |
| content: ''; | |
| display: table; | |
| clear: both; } | |
| *zoom: 1; | |
| } | |
| @mixin clearfix() { | |
| &:after { | |
| content: ''; | |
| display: table; | |
| clear: both; } | |
| *zoom: 1; | |
| } | |
| @mixin prefix($property, $value) { | |
| -webkit-#{$property}: #{$value}; | |
| -moz-#{$property}: #{$value}; | |
| -ms-#{$property}: #{$value}; | |
| -o-#{$property}: #{$value}; | |
| #{$property}: #{$value}; | |
| } | |
| @mixin transition($transition: 0.1s all) { | |
| @include prefix('transition', #{$transition}); | |
| } | |
| @mixin transform($transform) { | |
| @include prefix(transform, $transform); | |
| } | |
| @mixin gradient($from, $to, $fallback) { | |
| background: $fallback; | |
| background: -moz-linear-gradient(top, $from 0%, $to 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to)); | |
| background: -webkit-linear-gradient(top, $from 0%, $to 100%); | |
| background: -o-linear-gradient(top, $from 0%, $to 100%); | |
| background: -ms-linear-gradient(top, $from 0%, $to 100%); | |
| background: linear-gradient(top bottom, $from 0%, $to 100%); | |
| } | |
| @mixin backface($visibility: hidden) { | |
| @include prefix('backface-visibility', #{$visibility}); | |
| } | |
| @mixin box-sizing($box-sizing: border-box) { | |
| -webkit-box-sizing: #{$box-sizing}; | |
| -moz-box-sizing: #{$box-sizing}; | |
| box-sizing: #{$box-sizing}; | |
| } | |
| @function em($target, $context: $baseFontSize) { | |
| @if $target == 0 { | |
| @return 0; | |
| } | |
| @return $target / $context + 0em; | |
| } | |
| @function color-control($color) { | |
| @if (lightness( $color ) > 40) { | |
| @return #000; | |
| } | |
| @else { | |
| @return #fff; | |
| } | |
| } | |
| /*============================================================================ | |
| Dependency-free breakpoint mixin | |
| - http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/ | |
| ==============================================================================*/ | |
| $min: min-width; | |
| $max: max-width; | |
| @mixin at-query ($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; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Typography | |
| ==============================================================================*/ | |
| $baseFontSize: {{ settings.base_font_px }}px; // Henceforth known as 1em (assumed at 14px) | |
| // Title | |
| {% if settings.font_title contains 'google:' %} | |
| {% assign title-FontArray = settings.font_title | split: ':' %} | |
| {% assign title-FontName = title-FontArray[2] %} | |
| {% capture title-FontStack %}"{{ title-FontName | replace: '+', ' ' }}"{% if title-FontArray[1] == 'serifStack' %}, "Big Caslon","Bodoni MT",Georgia,serif {% else %}, "Helvetica Neue",Arial,sans-serif{% endif %}{% endcapture %} | |
| {% else %} | |
| {% assign title-FontStack = settings.font_title %} | |
| {% endif %} | |
| // Body (same logic) | |
| {% if settings.font_body contains 'google:' %} | |
| {% assign body-FontArray = settings.font_body | split: ':' %} | |
| {% assign body-FontName = body-FontArray[2] %} | |
| {% capture body-FontStack %}"{{ body-FontName | replace: '+', ' ' }}"{% if body-FontArray[1] == 'serifStack' %}, "Big Caslon","Bodoni MT",Georgia,serif {% else %}, "Helvetica Neue",Arial,sans-serif{% endif %}{% endcapture %} | |
| {% else %} | |
| {% assign body-FontStack = settings.font_body %} | |
| {% endif %} | |
| // Accent (same logic) | |
| {% if settings.font_accent contains 'google:' %} | |
| {% assign accent-FontArray = settings.font_accent | split: ':' %} | |
| {% assign accent-FontName = accent-FontArray[2] %} | |
| {% capture accent-FontStack %}"{{ accent-FontName | replace: '+', ' ' }}"{% if accent-FontArray[1] == 'serifStack' %}, "Big Caslon","Bodoni MT",Georgia,serif {% else %}, "Helvetica Neue",Arial,sans-serif{% endif %}{% endcapture %} | |
| {% else %} | |
| {% assign accent-FontStack = settings.font_accent %} | |
| {% endif %} | |
| $titleFontStack: {{title-FontStack}}; | |
| $bodyFontStack: {{body-FontStack}}; | |
| $accentFontStack: {{accent-FontStack}}; | |
| .title{ | |
| font-family: $titleFontStack; | |
| {% if settings.font_title_capitalize %}text-transform: uppercase; letter-spacing: 1px;{% endif %} | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| @mixin title(){ | |
| font-family: $titleFontStack; | |
| {% if settings.font_title_capitalize %}text-transform: uppercase; letter-spacing: 1px;{% endif %} | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .uppercase{ | |
| font-family: $accentFontStack; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-size: 0.8em; | |
| } | |
| @mixin uppercase(){ | |
| font-family: $accentFontStack; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-size: 0.8em; | |
| } | |
| @font-face { | |
| font-family: 'icons'; | |
| src: url('{{ "icons.eot" | asset_url }}'); | |
| src: url('{{ "icons.eot" | asset_url }}#iefix') format("embedded-opentype"), | |
| url('{{ "icons.woff" | asset_url }}') format("woff"), | |
| url('{{ "icons.ttf" | asset_url }}') format("truetype"), | |
| url('{{ "icons.svg" | asset_url }}#timber-icons') format("svg"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| $socialIconFontStack: 'icons'; | |
| body, | |
| input, | |
| textarea, | |
| button, | |
| select { | |
| font-size: $baseFontSize; | |
| line-height: 1.6; | |
| font-family: $bodyFontStack; | |
| color: $colorTextBody; | |
| font-weight: normal; | |
| -webkit-font-smoothing: antialiased; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| @extend .title; | |
| font-weight: normal; | |
| margin: 0 0 0.75em; | |
| line-height: 1.4; | |
| a { | |
| text-decoration: none; | |
| font-weight: inherit; | |
| } | |
| } | |
| /*================ Use em() Sass function to declare font-size ================*/ | |
| h1 { | |
| font-size: em(36px); | |
| @include at-query ($max, $small) { | |
| font-size: em(28px); | |
| } | |
| } | |
| h2 { | |
| font-size: em(28px); | |
| @include at-query ($max, $small) { | |
| font-size: em(22px); | |
| } | |
| } | |
| h3 { | |
| font-size: em(22px); | |
| @include at-query ($max, $small) { | |
| font-size: em(20px); | |
| } | |
| } | |
| h4 { | |
| font-size: em(20px); | |
| @include at-query ($max, $small) { | |
| font-size: em(18px); | |
| } | |
| } | |
| 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; } | |
| .h1--body { @extend h1; } | |
| .h2--body { @extend h2; } | |
| .h3--body { @extend h3; } | |
| .h4--body { @extend h4; } | |
| .h5--body { @extend h5; } | |
| .h6--body { @extend h6; } | |
| .h1--body, | |
| .h2--body, | |
| .h3--body, | |
| .h4--body, | |
| .h5--body, | |
| .h6--body{ | |
| text-transform: none; | |
| letter-spacing: 0px; | |
| font-family: $bodyFontStack; | |
| } | |
| p { | |
| margin: 0 0 ($gutter / 2) 0; | |
| img { | |
| margin: 0; | |
| } | |
| } | |
| em, | |
| .em { | |
| font-style: italic; | |
| } | |
| b, strong, .strong { | |
| font-weight: bold; | |
| } | |
| small, | |
| .small { | |
| font-size: 0.9em; | |
| } | |
| sup, sub, .sup, .sub { | |
| position: relative; | |
| font-size: 60%; | |
| vertical-align: baseline; | |
| } | |
| sup, .sup { | |
| top: -0.5em; | |
| } | |
| sub, .sub { | |
| bottom: -0.5em; | |
| } | |
| s, .s{ | |
| text-decoration: line-through; | |
| opacity: 0.5; | |
| } | |
| /*================ Blockquotes ================*/ | |
| blockquote { | |
| font-size: 1.125em; | |
| line-height: 1.71; | |
| font-style: italic; | |
| margin: 0 0 $gutter; | |
| padding: ($gutter / 2) $gutter; | |
| border-left: 1px solid $colorBorder; | |
| p { | |
| margin-bottom: 0; | |
| & + cite { | |
| margin-top: $gutter / 2; | |
| } | |
| } | |
| cite { | |
| display: block; | |
| font-size: 0.75em; | |
| &:before { | |
| content: '\2014 \0020'; | |
| } | |
| } | |
| } | |
| /*================ Code ================*/ | |
| code, pre { | |
| font-family: Consolas,monospace; | |
| font-size: 1em; | |
| border: 0 none; | |
| border-left: 1px solid $colorBorder; | |
| padding: 0 2px; | |
| } | |
| pre { | |
| overflow: auto; | |
| padding: $gutter / 2; | |
| margin: 0 0 $gutter; | |
| } | |
| .unicode{ | |
| font-family: "Lucida Sans Unicode", "Arial Unicode MS, Arial"; | |
| } | |
| .lt-ie9 .unicode{ | |
| display: none; | |
| } | |
| /*================ Horizontal Rules ================*/ | |
| hr{ | |
| clear: both; | |
| border-top: solid $colorBorder; | |
| border-width: 1px 0 0; | |
| margin: $gutter 0; | |
| height: 0; | |
| &.hr--small { | |
| margin: ($gutter / 2) 0; | |
| } | |
| &.hr--double { | |
| margin: ($gutter * 2) 0; | |
| } | |
| &.hr--clear { | |
| border-top-color: transparent; | |
| } | |
| &.hr--dash { | |
| margin: $gutter auto; | |
| width: 80px; | |
| } | |
| &.hr--thick { | |
| border-width: 2px 0 0; | |
| } | |
| &.hr--underline{ | |
| margin-top: 10px; | |
| margin-bottom: 20px; | |
| } | |
| } | |
| /*============================================================================ | |
| #Normalize | |
| ==============================================================================*/ | |
| *, input, :before, :after { | |
| @include box-sizing(); | |
| } | |
| html, body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { | |
| display: block; | |
| } | |
| audio, canvas, progress, video { | |
| display: inline-block; | |
| vertical-align: baseline; | |
| } | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| /*============================================================================ | |
| #Grid Setup | |
| - Based on csswizardry grid, but with floated columns, a fixed gutter size, and BEM classes | |
| - Breakpoints defined above, under #Breakpoint and Grid Variables | |
| - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid items | |
| ==============================================================================*/ | |
| $responsive: true; | |
| $mobile-first: true; | |
| $use-silent-classes: false; | |
| $push: true; | |
| $pull: false; | |
| /* Force clearfix on grids */ | |
| .grid, | |
| .grid-uniform { | |
| @include clearfix; | |
| } | |
| /* Manual grid__item clearfix */ | |
| .grid__item.clear { | |
| clear: both; | |
| } | |
| $class-type: unquote("."); | |
| @if $use-silent-classes == true { | |
| $class-type: unquote("%"); | |
| } | |
| @mixin grid-media-query($media-query) { | |
| $breakpoint-found: false; | |
| @each $breakpoint in $breakpoints { | |
| $name: nth($breakpoint, 1); | |
| $declaration: nth($breakpoint, 2); | |
| @if $media-query == $name and $declaration { | |
| $breakpoint-found: true; | |
| @media only screen and #{$declaration} { | |
| @content; | |
| } | |
| } | |
| } | |
| @if $breakpoint-found == false { | |
| @warn "Breakpoint '#{$media-query}' does not exist"; | |
| } | |
| } | |
| /*============================================================================ | |
| Drop relative positioning into silent classes which can't take advantage of | |
| the `[class*="push--"]` and `[class*="pull--"]` selectors. | |
| ==============================================================================*/ | |
| @mixin silent-relative() { | |
| @if $use-silent-classes == true { | |
| position:relative; | |
| } | |
| } | |
| /*============================================================================ | |
| Grid Setup | |
| 1. Allow the grid system to be used on lists. | |
| 2. Remove any margins and paddings that might affect the grid system. | |
| 3. Apply a negative `margin-left` to negate the columns' gutters. | |
| ==============================================================================*/ | |
| #{$class-type}grid, | |
| #{$class-type}grid-uniform { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| margin-left: -$gridGutter; | |
| } | |
| #{$class-type}grid__item { | |
| float: left; | |
| min-height: 1px; | |
| padding-left: $gridGutter; | |
| vertical-align: top; | |
| @if $mobile-first == true { | |
| width: 100%; | |
| } | |
| @include box-sizing(); | |
| } | |
| /*============================================================================ | |
| Reversed grids allow you to structure your source in the opposite | |
| order to how your rendered layout will appear. | |
| ==============================================================================*/ | |
| #{$class-type}grid--rev { | |
| @extend #{$class-type}grid; | |
| direction: rtl; | |
| text-align: left; | |
| > #{$class-type}grid__item { | |
| direction: ltr; | |
| text-align: left; | |
| float: right; | |
| } | |
| } | |
| /* Gutterless grids have all the properties of regular grids, minus any spacing. */ | |
| #{$class-type}grid--full { | |
| @extend #{$class-type}grid; | |
| margin-left: 0; | |
| > #{$class-type}grid__item { | |
| padding-left: 0; | |
| } | |
| } | |
| /*============================================================================ | |
| WIDTHS | |
| - Create width classes, prefixed by the specified namespace. | |
| ==============================================================================*/ | |
| @mixin device-type($namespace:"") { | |
| /** Whole */ | |
| #{$class-type}#{$namespace}one-whole { width: 100%; } | |
| /* Halves */ | |
| #{$class-type}#{$namespace}one-half { width: 50%; } | |
| /* Thirds */ | |
| #{$class-type}#{$namespace}one-third { width: 33.333%; } | |
| #{$class-type}#{$namespace}two-thirds { width: 66.666%; } | |
| /* Quarters */ | |
| #{$class-type}#{$namespace}one-quarter { width: 25%; } | |
| #{$class-type}#{$namespace}two-quarters { width: 50%; } | |
| #{$class-type}#{$namespace}three-quarters { width: 75%; } | |
| /* Fifths */ | |
| #{$class-type}#{$namespace}one-fifth { width: 20%; } | |
| #{$class-type}#{$namespace}two-fifths { width: 40%; } | |
| #{$class-type}#{$namespace}three-fifths { width: 60%; } | |
| #{$class-type}#{$namespace}four-fifths { width: 80%; } | |
| /* Sixths */ | |
| #{$class-type}#{$namespace}one-sixth { width: 16.666%; } | |
| #{$class-type}#{$namespace}two-sixths { width: 33.333%; } | |
| #{$class-type}#{$namespace}three-sixths { width: 50%; } | |
| #{$class-type}#{$namespace}four-sixths { width: 66.666%; } | |
| #{$class-type}#{$namespace}five-sixths { width: 83.333%; } | |
| /* Eighths */ | |
| #{$class-type}#{$namespace}one-eighth { width: 12.5%; } | |
| #{$class-type}#{$namespace}two-eighths { width: 25%; } | |
| #{$class-type}#{$namespace}three-eighths { width: 37.5%; } | |
| #{$class-type}#{$namespace}four-eighths { width: 50%; } | |
| #{$class-type}#{$namespace}five-eighths { width: 62.5%; } | |
| #{$class-type}#{$namespace}six-eighths { width: 75%; } | |
| #{$class-type}#{$namespace}seven-eighths { width: 87.5%; } | |
| /* Tenths */ | |
| #{$class-type}#{$namespace}one-tenth { width: 10%; } | |
| #{$class-type}#{$namespace}two-tenths { width: 20%; } | |
| #{$class-type}#{$namespace}three-tenths { width: 30%; } | |
| #{$class-type}#{$namespace}four-tenths { width: 40%; } | |
| #{$class-type}#{$namespace}five-tenths { width: 50%; } | |
| #{$class-type}#{$namespace}six-tenths { width: 60%; } | |
| #{$class-type}#{$namespace}seven-tenths { width: 70%; } | |
| #{$class-type}#{$namespace}eight-tenths { width: 80%; } | |
| #{$class-type}#{$namespace}nine-tenths { width: 90%; } | |
| /* Twelfths */ | |
| #{$class-type}#{$namespace}one-twelfth { width: 8.333%; } | |
| #{$class-type}#{$namespace}two-twelfths { width: 16.666%; } | |
| #{$class-type}#{$namespace}three-twelfths { width: 25%; } | |
| #{$class-type}#{$namespace}four-twelfths { width: 33.333%; } | |
| #{$class-type}#{$namespace}five-twelfths { width: 41.666% } | |
| #{$class-type}#{$namespace}six-twelfths { width: 50%; } | |
| #{$class-type}#{$namespace}seven-twelfths { width: 58.333%; } | |
| #{$class-type}#{$namespace}eight-twelfths { width: 66.666%; } | |
| #{$class-type}#{$namespace}nine-twelfths { width: 75%; } | |
| #{$class-type}#{$namespace}ten-twelfths { width: 83.333%; } | |
| #{$class-type}#{$namespace}eleven-twelfths { width: 91.666%; } | |
| } | |
| /*================ Clearfix helper on uniform grids ================*/ | |
| @mixin clearfix-helper($namespace:"") { | |
| .grid-uniform { | |
| #{$class-type}#{$namespace}one-half:nth-child(2n+1), | |
| #{$class-type}#{$namespace}one-third:nth-child(3n+1), | |
| #{$class-type}#{$namespace}one-quarter:nth-child(4n+1), | |
| #{$class-type}#{$namespace}one-fifth:nth-child(5n+1), | |
| #{$class-type}#{$namespace}one-sixth:nth-child(6n+1), | |
| #{$class-type}#{$namespace}two-sixths:nth-child(3n+1), | |
| #{$class-type}#{$namespace}three-sixths:nth-child(2n+1), | |
| #{$class-type}#{$namespace}two-eighths:nth-child(4n+1), | |
| #{$class-type}#{$namespace}four-eighths:nth-child(2n+1), | |
| #{$class-type}#{$namespace}five-tenths:nth-child(2n+1), | |
| #{$class-type}#{$namespace}one-twelfth:nth-child(12n+1), | |
| #{$class-type}#{$namespace}two-twelfths:nth-child(6n+1), | |
| #{$class-type}#{$namespace}three-twelfths:nth-child(4n+1), | |
| #{$class-type}#{$namespace}four-twelfths:nth-child(3n+1), | |
| #{$class-type}#{$namespace}six-twelfths:nth-child(2n+1) { clear: both; } | |
| } | |
| } | |
| /*================ Helper show/hide classes around our breakpoints ================*/ | |
| @mixin device-helper($namespace:"") { | |
| #{$class-type}#{$namespace}show { display: block!important; } | |
| #{$class-type}#{$namespace}hide { display: none!important; } | |
| #{$class-type}#{$namespace}text-left { text-align: left!important; } | |
| #{$class-type}#{$namespace}text-right { text-align: right!important; } | |
| #{$class-type}#{$namespace}text-center { text-align: center!important; } | |
| #{$class-type}#{$namespace}left { float: left!important; } | |
| #{$class-type}#{$namespace}right { float: right!important; } | |
| } | |
| /*================ Our regular, non-responsive width and helper classes ================*/ | |
| @include device-type(); | |
| @include device-helper(); | |
| /*================ Our responsive classes, if we have enabled them ================*/ | |
| @if $responsive == true { | |
| @each $name in $breakpoint-has-widths { | |
| @include grid-media-query($name) { | |
| @include device-type('#{$name}--'); | |
| @include device-helper('#{$name}--'); | |
| @include clearfix-helper('#{$name}--'); | |
| } | |
| } | |
| } | |
| /*================ CSS3 Vertical Align Helper ================*/ | |
| .vertical-align { | |
| position: relative; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| /*============================================================================ | |
| PUSH | |
| - Push classes, to move grid items over to the right by certain amounts | |
| ==============================================================================*/ | |
| @mixin push-setup($namespace: "") { | |
| /* Whole */ | |
| #{$class-type}push--#{$namespace}one-whole { left: 100%; @include silent-relative(); } | |
| /* Halves */ | |
| #{$class-type}push--#{$namespace}one-half { left: 50%; @include silent-relative(); } | |
| /* Thirds */ | |
| #{$class-type}push--#{$namespace}one-third { left: 33.333%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}two-thirds { left: 66.666%; @include silent-relative(); } | |
| /* Quarters */ | |
| #{$class-type}push--#{$namespace}one-quarter { left: 25%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}two-quarters { left: 50%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}three-quarters { left: 75%; @include silent-relative(); } | |
| /* Fifths */ | |
| #{$class-type}push--#{$namespace}one-fifth { left: 20%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}two-fifths { left: 40%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}three-fifths { left: 60%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}four-fifths { left: 80%; @include silent-relative(); } | |
| /* Sixths */ | |
| #{$class-type}push--#{$namespace}one-sixth { left: 16.666%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}two-sixths { left: 33.333%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}three-sixths { left: 50%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}four-sixths { left: 66.666%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}five-sixths { left: 83.333%; @include silent-relative(); } | |
| /* Eighths */ | |
| #{$class-type}push--#{$namespace}one-eighth { left: 12.5%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}two-eighths { left: 25%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}three-eighths { left: 37.5%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}four-eighths { left: 50%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}five-eighths { left: 62.5%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}six-eighths { left: 75%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}seven-eighths { left: 87.5%; @include silent-relative(); } | |
| /* Tenths */ | |
| #{$class-type}push--#{$namespace}one-tenth { left: 10%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}two-tenths { left: 20%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}three-tenths { left: 30%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}four-tenths { left: 40%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}five-tenths { left: 50%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}six-tenths { left: 60%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}seven-tenths { left: 70%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}eight-tenths { left: 80%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}nine-tenths { left: 90%; @include silent-relative(); } | |
| /* Twelfths */ | |
| #{$class-type}push--#{$namespace}one-twelfth { left: 8.333%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}two-twelfths { left: 16.666%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}three-twelfths { left: 25%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}four-twelfths { left: 33.333%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}five-twelfths { left: 41.666%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}six-twelfths { left: 50%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}seven-twelfths { left: 58.333%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}eight-twelfths { left: 66.666%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}nine-twelfths { left: 75%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}ten-twelfths { left: 83.333%; @include silent-relative(); } | |
| #{$class-type}push--#{$namespace}eleven-twelfths { left: 91.666%; @include silent-relative(); } | |
| } | |
| @if $push == true { | |
| [class*="push--"]{ position:relative; } | |
| @include push-setup(); | |
| @if $responsive == true { | |
| @each $name in $breakpoint-has-push { | |
| @include grid-media-query($name) { | |
| @include push-setup('#{$name}--'); | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| PULL | |
| - Pull classes, to move grid items back to the left by certain amounts | |
| ==============================================================================*/ | |
| @mixin pull-setup($namespace: "") { | |
| /* Whole */ | |
| #{$class-type}pull--#{$namespace}one-whole { right: 100%; @include silent-relative(); } | |
| /* Halves */ | |
| #{$class-type}pull--#{$namespace}one-half { right: 50%; @include silent-relative(); } | |
| /* Thirds */ | |
| #{$class-type}pull--#{$namespace}one-third { right: 33.333%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}two-thirds { right: 66.666%; @include silent-relative(); } | |
| /* Quarters */ | |
| #{$class-type}pull--#{$namespace}one-quarter { right: 25%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}two-quarters { right: 50%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}three-quarters { right: 75%; @include silent-relative(); } | |
| /* Fifths */ | |
| #{$class-type}pull--#{$namespace}one-fifth { right: 20%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}two-fifths { right: 40%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}three-fifths { right: 60%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}four-fifths { right: 80%; @include silent-relative(); } | |
| /* Sixths */ | |
| #{$class-type}pull--#{$namespace}one-sixth { right: 16.666%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}two-sixths { right: 33.333%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}three-sixths { right: 50%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}four-sixths { right: 66.666%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}five-sixths { right: 83.333%; @include silent-relative(); } | |
| /* Eighths */ | |
| #{$class-type}pull--#{$namespace}one-eighth { right: 12.5%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}two-eighths { right: 25%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}three-eighths { right: 37.5%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}four-eighths { right: 50%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}five-eighths { right: 62.5%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}six-eighths { right: 75%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}seven-eighths { right: 87.5%; @include silent-relative(); } | |
| /* Tenths */ | |
| #{$class-type}pull--#{$namespace}one-tenth { right: 10%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}two-tenths { right: 20%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}three-tenths { right: 30%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}four-tenths { right: 40%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}five-tenths { right: 50%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}six-tenths { right: 60%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}seven-tenths { right: 70%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}eight-tenths { right: 80%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}nine-tenths { right: 90%; @include silent-relative(); } | |
| /* Twelfths */ | |
| #{$class-type}pull--#{$namespace}one-twelfth { right: 8.333%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}two-twelfths { right: 16.666%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}three-twelfths { right: 25%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}four-twelfths { right: 33.333%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}five-twelfths { right: 41.666%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}six-twelfths { right: 50%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}seven-twelfths { right: 58.333%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}eight-twelfths { right: 66.666%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}nine-twelfths { right: 75%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}ten-twelfths { right: 83.333%; @include silent-relative(); } | |
| #{$class-type}pull--#{$namespace}eleven-twelfths { right: 91.666%; @include silent-relative(); } | |
| } | |
| @if $pull == true { | |
| [class*="pull--"]{ position:relative; } | |
| @include pull-setup(); | |
| @if $responsive == true { | |
| @each $name in $breakpoint-has-pull { | |
| @include grid-media-query($name) { | |
| @include pull-setup('#{$name}--'); | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Basic Styles | |
| ==============================================================================*/ | |
| body:not(.template-index){ | |
| background-color: $colorBody; | |
| } | |
| [tabindex='-1']:focus { | |
| outline: none; | |
| } | |
| .wrapper { | |
| @include clearfix(); | |
| max-width: $siteWidth; | |
| margin: 0 auto; | |
| padding: 0 ($gutter / 2); | |
| @include at-query ($min, $small) { | |
| padding: 0 $gutter; | |
| } | |
| } | |
| .main-content { | |
| display: block; | |
| padding-bottom: $gutter * 4; | |
| } | |
| /*============================================================================ | |
| #Helper Classes | |
| ==============================================================================*/ | |
| .left { float: left; } | |
| .right { float: right; } | |
| .text-center { text-align: center; } | |
| .text-right { text-align: right; } | |
| .hidden { display: none; } | |
| .lighten{ opacity: 0.5; } | |
| .display-table { | |
| display: table; | |
| table-layout: fixed; | |
| width: 100%; | |
| } | |
| .display-table-cell { | |
| display: table-cell; | |
| vertical-align: middle; | |
| float: none; | |
| } | |
| @include at-query ($min, $large) { | |
| .large--display-table { | |
| display: table; | |
| table-layout: fixed; | |
| width: 100%; | |
| } | |
| .large--display-table-cell { | |
| display: table-cell; | |
| vertical-align: middle; | |
| float: none; | |
| } | |
| } | |
| .page-margin{ | |
| padding-top: $gutter*2; | |
| } | |
| @include at-query($max, $small) { | |
| .hidden-sm { | |
| display: none; | |
| } | |
| } | |
| @include at-query($max, $medium) { | |
| .hidden-md-down { | |
| display: none; | |
| } | |
| } | |
| @media only screen and (min-width: ($small + 1px) ) and (max-width: ($medium) ){ | |
| .hidden-md { | |
| display: none; | |
| } | |
| } | |
| @include at-query($min, $medium) { | |
| .hidden-md-up { | |
| display: none; | |
| } | |
| } | |
| @include at-query($min, $large) { | |
| .hidden-lg { | |
| display: none; | |
| } | |
| } | |
| html.no-js{ | |
| .js{ | |
| display: none; | |
| } | |
| } | |
| html.supports-js { | |
| .no-js{ | |
| display: none; | |
| } | |
| } | |
| /*================ Section Headers ================*/ | |
| .section-header { | |
| margin-bottom: $gutter / 1.5; | |
| } | |
| @include at-query ($min, $large) { | |
| .section-header { | |
| display: table; | |
| width: 100%; | |
| } | |
| .section-header__title { | |
| margin-bottom: $gutter / 2.5; | |
| } | |
| .section-header__left { | |
| display: table-cell; | |
| vertical-align: middle; | |
| margin-bottom: 0; | |
| h1, h2, h3, h4, | |
| .h1, .h2, .h3, .h4 { | |
| margin-bottom: 0; | |
| } | |
| } | |
| .section-header__right { | |
| display: table-cell; | |
| vertical-align: middle; | |
| text-align: right; | |
| @include at-query ($max, $medium) { | |
| margin-bottom: $gutter; | |
| } | |
| } | |
| } | |
| .section-header__right { | |
| .btn{ | |
| margin-top: 3px !important; | |
| } | |
| .form-horizontal, | |
| .collection-view { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| @include at-query ($min, $postSmall) { | |
| label + select, | |
| .collection-view { | |
| margin-left: $gutter / 2; | |
| } | |
| } | |
| } | |
| .collection-view { | |
| display: inline-block; | |
| border: 1px solid $colorBorder; | |
| border-radius: $radius; | |
| padding: 0 5px; | |
| height: 37px; // same as form elements | |
| overflow: hidden; | |
| /*================ Only show on larger screens ================*/ | |
| @include at-query ($min, $large) { | |
| display: inline-block; | |
| } | |
| } | |
| .change-view { | |
| display: block; | |
| background: none; | |
| border: 0 none; | |
| float: left; | |
| padding: 10px 8px; | |
| color: $colorBorder; | |
| line-height: 1; | |
| &:hover, | |
| &:focus { | |
| color: $colorPrimary; | |
| } | |
| } | |
| .change-view--active { | |
| cursor: default; | |
| color: $colorPrimary; | |
| } | |
| /*============================================================================ | |
| #Rich Text Editor | |
| ==============================================================================*/ | |
| .rte { | |
| margin-bottom: $gutter / 2; | |
| // Add some top margin to headers from the rich text editor | |
| h1, h2, h3, h4, h5, h6 { | |
| margin-top: 1.5em; | |
| &:first-child { | |
| margin-top: 0; | |
| } | |
| } | |
| > div { | |
| margin-bottom: $gutter / 2; | |
| } | |
| ul, ol { | |
| margin-left: 35px; | |
| } | |
| ul { | |
| @extend ul.disc; | |
| } | |
| ul ul, ol ul { | |
| list-style-type: circle; | |
| } | |
| ol ol ul, ol ul ul, ul ol ul, ul ul ul { | |
| list-style-type: square; | |
| } | |
| li { | |
| margin-bottom: 0.4em; | |
| } | |
| img{ | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| img[style*="float: left"], | |
| img[style*="float:left"]{ | |
| margin-right: $gutter/2; | |
| } | |
| img[style*="float: right"], | |
| img[style*="float:right"]{ | |
| margin-left: $gutter/2; | |
| } | |
| word-wrap: break-word; | |
| } | |
| .rte--header { | |
| margin-bottom: 0; | |
| } | |
| .rte__table-wrapper { | |
| max-width: 100%; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .columns{ | |
| -webkit-column-gap: $gutter*1.5; | |
| -moz-column-gap: $gutter*1.5; | |
| column-gap: $gutter*1.5; | |
| -webkit-columns: 2 $small/2; | |
| -moz-columns: 2 $small/2; | |
| columns: 2 $small/2; | |
| } | |
| /*============================================================================ | |
| #Links and Buttons | |
| ==============================================================================*/ | |
| a, | |
| .text-link { | |
| color: $colorLink; | |
| text-decoration: underline; | |
| background: transparent; | |
| } | |
| a:hover, | |
| a:focus { | |
| color: $colorLinkHover; | |
| } | |
| button { | |
| overflow: visible; | |
| } | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| .btn{ | |
| display: inline-block; | |
| padding: 8px 10px; | |
| margin: 0; | |
| line-height: 1.42; | |
| font-weight: normal; | |
| text-decoration: none; | |
| text-align: center; | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| border: 1px solid transparent; | |
| @include prefix('user-select', 'none'); | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| border-radius: $radius; | |
| background-color: $colorBtnPrimary; | |
| color: $colorBtnPrimaryText; | |
| &:hover { | |
| background-color: $colorBtnPrimaryHover; | |
| color: $colorBtnPrimaryText; | |
| } | |
| &:active, | |
| &:focus { | |
| background-color: $colorBtnPrimaryActive; | |
| color: $colorBtnPrimaryText; | |
| } | |
| &[disabled], | |
| &.disabled { | |
| cursor: default; | |
| color: $disabledBorder; | |
| background-color: $disabledGrey; | |
| &:hover{ | |
| color: $disabledBorder !important; | |
| background-color: $disabledGrey !important; | |
| } | |
| } | |
| } | |
| .btn--secondary, | |
| input.btn--secondary { | |
| @extend .btn; | |
| background-color: $colorBtnSecondary; | |
| border: 1px solid $colorBtnSecondaryText; | |
| color: $colorBtnSecondaryText; | |
| &:hover { | |
| background-color: $colorBtnSecondaryHover; | |
| color: $colorBtnSecondaryText; | |
| } | |
| &:focus, | |
| &:active { | |
| background-color: $colorBtnSecondaryActive; | |
| color: $colorBtnSecondaryText; | |
| } | |
| } | |
| .btn--small { | |
| padding: 6px 7px; | |
| font-size: em(10px); | |
| } | |
| .btn--large { | |
| padding: 12px 20px; | |
| font-size: em(14px); | |
| @extend .title; | |
| } | |
| .btn--full { | |
| width: 100%; | |
| } | |
| .btn--clear { | |
| background-color: transparent; | |
| color: $colorPrimary; | |
| border: 1px solid $colorPrimary; | |
| &:hover, | |
| &:focus, | |
| &:active{ | |
| color: $colorPrimary; | |
| background-color: rgba($colorSplash, 0.3); | |
| } | |
| &.disabled{ | |
| border: 1px solid $disabledBorder; | |
| } | |
| } | |
| .lt-ie9 .btn--clear:hover{ | |
| background-color: $colorSplash; | |
| } | |
| .btn--splash { | |
| background-color: $colorSplash; | |
| &:hover, | |
| &:focus, | |
| &:active{ | |
| background-color: darken($colorSplash, 10%); | |
| } | |
| } | |
| .btn--square{ | |
| border-radius: 0px !important; | |
| } | |
| .btn--outline{ | |
| background-color: #FFFFFF; | |
| border: 1px solid $colorHomeDark; | |
| box-shadow: 0 0 0 8px #FFFFFF; | |
| color: $colorHomeDark; | |
| margin: 8px; | |
| &:hover, &:focus, &:active{ | |
| color: $colorSplash; | |
| background-color: #FFFFFF; | |
| } | |
| } | |
| /*================ Force an input/button to look like a text link ================*/ | |
| .text-link { | |
| display: inline; | |
| border: 0 none; | |
| background: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| /*============================================================================ | |
| #Lists | |
| ==============================================================================*/ | |
| ul, ol { | |
| margin: 0 0 $gutter; | |
| padding: 0; | |
| } | |
| ul { list-style: none outside; } | |
| ol { list-style: decimal; } | |
| ul ul, ul ol, | |
| ol ol, ol ul { margin: 4px 0 5px 20px; } | |
| li { margin-bottom: 0.25em; } | |
| ol, ul.square, ul.disc { margin-left: 20px; } | |
| ul.square { list-style: square outside; } | |
| ul.disc { list-style: disc outside; } | |
| ol.alpha { list-style: lower-alpha outside; } | |
| .inline-list li { | |
| display: inline-block; | |
| margin-bottom: 0; | |
| } | |
| /*============================================================================ | |
| #Tabs and mobile accordion | |
| ==============================================================================*/ | |
| .tabs-wrapper{ | |
| padding-top: 30px; | |
| } | |
| ul.tabs { | |
| margin: 0px 0px 0px 0px; | |
| padding: 0px; | |
| list-style: none; | |
| display: inline-block; | |
| position: relative; | |
| } | |
| ul.tabs > li { | |
| background: none; | |
| color: $colorPrimary; | |
| display: inline-block; | |
| padding: 10px 0px; | |
| margin: 0rem 3rem 0rem 0rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| vertical-align: bottom; | |
| border-bottom: 2px solid transparent; | |
| } | |
| ul.tabs > li.current{ | |
| border-bottom: 2px solid $colorBorder; | |
| color: #656565; | |
| font-weight: 500; | |
| } | |
| .tab-content{ | |
| display: none; | |
| border-top:1px solid $colorBorder; | |
| padding: 15px 15px 15px 0px; | |
| min-height: 6rem; | |
| } | |
| .tab-content.current{ | |
| display: inherit; | |
| } | |
| .accordion { | |
| border-bottom:1px solid $colorBorder; | |
| } | |
| .accordion-toggle { | |
| cursor: pointer; | |
| border-top: 1px solid $colorBorder; | |
| padding: 1rem 0; | |
| margin-bottom: auto; | |
| color: darken($colorPrimary, 10%); | |
| } | |
| .accordion-content { | |
| display: none; | |
| color: darken($colorPrimary, 10%); | |
| padding-bottom: $gutter; | |
| } | |
| .accordion-content.accordion--open{ | |
| display: block; | |
| } | |
| .accordion .icon-minus, .accordion .icon-plus{ | |
| float:right; | |
| color: $colorBorder; | |
| } | |
| /*============================================================================ | |
| #Tables | |
| ==============================================================================*/ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| table.full { | |
| width: 100%; | |
| margin-bottom: 1em; | |
| } | |
| .table-wrap { | |
| max-width: 100%; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| tr{ | |
| border-bottom: 1px solid $colorBorder; | |
| } | |
| th { | |
| font-weight: bold; | |
| } | |
| th, td { | |
| text-align: left; | |
| padding: $gutter / 2; | |
| } | |
| /* Responsive tables for IE9+ */ | |
| html:not(.lt-ie9) { | |
| .table--responsive { | |
| @include at-query($max, $small) { | |
| thead { | |
| display: none; | |
| } | |
| tr { | |
| display: block; | |
| } | |
| tbody{ | |
| border-top: 1px solid $colorBorder; | |
| } | |
| tbody td:not(:first-child){ | |
| border-top: 1px solid rgba($colorBorder, 0.2); | |
| } | |
| tfoot{ | |
| border-top: 1px solid $colorBorder; | |
| border-bottom: 2px solid $colorBorder; | |
| } | |
| // IE9 table layout fixes | |
| tr, | |
| td { | |
| float: left; | |
| clear: both; | |
| width: 100%; | |
| border-bottom: none; | |
| } | |
| th, | |
| td { | |
| display: block; | |
| text-align: right; | |
| padding: 10px; | |
| } | |
| td:before { | |
| content: attr(data-label); | |
| float: left; | |
| @include uppercase; | |
| font-size: 12px; | |
| padding-right: 10px; | |
| } | |
| } | |
| } | |
| @include at-query($max, $small) { | |
| .table--small-hide { | |
| display: none !important; | |
| } | |
| .table__section + .table__section { | |
| position: relative; | |
| margin-top: 10px; | |
| padding-top: 15px; | |
| &:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 15px; | |
| right: 15px; | |
| border-bottom: 1px solid $colorBorder; | |
| } | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #OOCSS Media Object | |
| - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ | |
| ==============================================================================*/ | |
| .media, | |
| .media-flex { | |
| overflow: hidden; | |
| _overflow: visible; | |
| zoom: 1; | |
| } | |
| .media-img { | |
| float: left; | |
| margin-right: $gutter; | |
| } | |
| .media-img-right { | |
| float: right; | |
| margin-left: $gutter; | |
| } | |
| .media-img img, | |
| .media-img-right img { | |
| display: block; | |
| } | |
| /*============================================================================ | |
| #Images and Iframes | |
| ==============================================================================*/ | |
| img { | |
| border: 0 none; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| img.auto, | |
| .grid__item img, | |
| .grid__item iframe { | |
| max-width: 100%; | |
| } | |
| .video-wrapper, .sky-pilot-embed { | |
| position: relative; | |
| overflow: hidden; | |
| max-width: 100%; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| height: auto; | |
| iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| } | |
| /*============================================================================ | |
| #Forms | |
| ==============================================================================*/ | |
| form { | |
| margin-bottom: $gutter; | |
| } | |
| input, | |
| textarea, | |
| button, | |
| select { | |
| font-size: 1em; | |
| } | |
| @include at-query($max, $medium) { | |
| input, | |
| textarea, | |
| select{ | |
| font-size: 16px; | |
| } | |
| } | |
| button, | |
| input[type="text"], | |
| input[type="search"], | |
| input[type="password"], | |
| input[type="email"], | |
| input[type="file"], | |
| input[type="number"], | |
| input[type="tel"], | |
| input[type="submit"], | |
| input[type="url"], | |
| textarea { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| } | |
| input, | |
| textarea, | |
| select, | |
| fieldset { | |
| border-radius: $radius; | |
| max-width: 100%; | |
| &.input-full { | |
| width: 100%; | |
| } | |
| } | |
| input, | |
| select, | |
| textarea { | |
| padding: 8px 10px; | |
| line-height: 1.42; | |
| } | |
| fieldset { | |
| border: 1px solid $colorBorder; | |
| padding: $gutter / 2; | |
| } | |
| legend { | |
| border: 0; | |
| padding: 0; | |
| } | |
| optgroup { | |
| font-weight: bold; | |
| } | |
| input { | |
| display: inline-block; | |
| width: auto; | |
| } | |
| button, | |
| input[type="submit"] { | |
| cursor: pointer; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| input[type="submit"] { | |
| @extend .btn; | |
| } | |
| .hidden-label { | |
| clip: rect(0 0 0 0); | |
| clip: rect(0, 0, 0, 0); | |
| overflow: hidden; | |
| position: absolute; | |
| height: 1px; | |
| width: 1px; | |
| } | |
| /*================ Input width and border ================*/ | |
| input[type="text"], | |
| input[type="search"], | |
| input[type="password"], | |
| input[type="email"], | |
| input[type="file"], | |
| input[type="number"], | |
| input[type="tel"], | |
| input[type="url"], | |
| textarea, | |
| select { | |
| border: 1px solid $colorBorder; | |
| width: 100%; | |
| max-width: 100%; | |
| display: block; | |
| margin: 0 0 1em; | |
| background-color: transparent; | |
| outline: none; | |
| &:focus { | |
| border: 1px solid darken($colorBorder, 10%); | |
| box-shadow: 0 0 5px rgba(#000, .15); | |
| } | |
| &[disabled], | |
| &.disabled { | |
| cursor: default; | |
| background-color: $disabledGrey; | |
| border-color: $disabledBorder; | |
| } | |
| } | |
| textarea { | |
| min-height: 100px; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| display: inline; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| select { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| background-position: right center; | |
| background: { | |
| image: url('{{ "ico-select.svg" | asset_url }}'); | |
| repeat: no-repeat; | |
| position: right 10px center; | |
| color: transparent; | |
| } | |
| padding-right: 28px; | |
| text-indent: 0.01px; | |
| text-overflow: ''; | |
| cursor: pointer; | |
| /*================ Hide the svg arrow in IE9 and below ================*/ | |
| .ie9 &, | |
| .lt-ie9 & { | |
| padding-right: 10px; | |
| background-image: none; | |
| } | |
| } | |
| // Force option color (affects IE only) | |
| option { | |
| color: #000; | |
| background-color: #fff; | |
| } | |
| select::-ms-expand { | |
| display: none; | |
| } | |
| /*================ Form labels ================*/ | |
| label, | |
| legend { | |
| display: block; | |
| margin-bottom: 2px; | |
| font-weight: bold; | |
| &.inline { | |
| display: inline; | |
| } | |
| .form-horizontal &.label--hidden, | |
| &.label--hidden { | |
| height: 0; | |
| width: 0; | |
| margin-bottom: 0; | |
| overflow: hidden; | |
| .ie9 &, | |
| .lt-ie9 & { | |
| height: auto; | |
| width: auto; | |
| margin-bottom: 2px; | |
| overflow: visible; | |
| } | |
| } | |
| } | |
| /*================ We don't want the same label treatment for checkboxes/radios ================*/ | |
| input[type="checkbox"] + label, | |
| input[type="radio"] + label { | |
| font-weight: normal; | |
| } | |
| label[for] { | |
| cursor: pointer; | |
| } | |
| .label-hint { | |
| color: #999; | |
| } | |
| /*================ Horizontal Form ================*/ | |
| form.form-horizontal, | |
| .form-horizontal { | |
| margin-bottom: 0; | |
| input[type="text"], | |
| input[type="search"], | |
| input[type="password"], | |
| input[type="email"], | |
| input[type="file"], | |
| input[type="number"], | |
| input[type="tel"], | |
| input[type="url"], | |
| textarea, | |
| select, | |
| label { | |
| display: inline-block; | |
| margin-bottom: 0; | |
| width: auto; | |
| } | |
| } | |
| /*================ Error styles ================*/ | |
| input[type="text"], | |
| input[type="search"], | |
| input[type="password"], | |
| input[type="email"], | |
| input[type="file"], | |
| input[type="number"], | |
| input[type="tel"], | |
| input[type="url"], | |
| textarea { | |
| &.error { | |
| border-color: $errorRed; | |
| background-color: $errorRedBg; | |
| color: $errorRed; | |
| } | |
| } | |
| label.error { | |
| color: $errorRed; | |
| } | |
| /*================ Input Group ================*/ | |
| .input-group { | |
| position: relative; | |
| display: table; | |
| border-collapse: separate; | |
| .input-group-field:first-child, | |
| .input-group-btn:first-child, | |
| .input-group-btn:first-child > .btn, | |
| input[type="hidden"]:first-child + .input-group-field, | |
| input[type="hidden"]:first-child + .input-group-btn > .btn { | |
| border-radius: $radius 0 0 $radius; | |
| } | |
| .input-group-field:last-child, | |
| .input-group-btn:last-child > .btn { | |
| border-radius: 0 $radius $radius 0; | |
| } | |
| input { | |
| // Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons | |
| &::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| margin-top: -1px; | |
| margin-bottom: -1px; | |
| } | |
| } | |
| } | |
| .input-group-field, | |
| .input-group-btn { | |
| display: table-cell; | |
| vertical-align: middle; | |
| margin: 0; | |
| } | |
| .input-group .btn, | |
| .input-group .input-group-field { | |
| height: 37px; | |
| } | |
| .input-group .input-group-field { | |
| width: 100%; | |
| margin-bottom: 0; | |
| } | |
| .input-group-btn { | |
| position: relative; | |
| white-space: nowrap; | |
| width: 1%; | |
| padding: 0; | |
| } | |
| /*============================================================================ | |
| #Icons | |
| ==============================================================================*/ | |
| .icon-fallback-text .icon { | |
| display: none; | |
| .supports-fontface & { | |
| display: inline-block; | |
| } | |
| } | |
| /*============================================================================ | |
| A generic way to visually hide content while | |
| remaining accessible to screen readers (h5bp.com) | |
| ==============================================================================*/ | |
| .supports-fontface .icon-fallback-text .fallback-text { | |
| clip: rect(0 0 0 0); | |
| overflow: hidden; | |
| position: absolute; | |
| height: 1px; | |
| width: 1px; | |
| } | |
| .icon:before { | |
| display: none; | |
| } | |
| .supports-fontface .icon:before { | |
| display: inline; | |
| font-family: $socialIconFontStack; | |
| text-decoration: none; | |
| speak: none; // future fallback, limited in effect currently | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /*================ Icon mapping ================*/ | |
| .icon-amazon_payments:before{ content: "\e800"; } | |
| .icon-american_express:before{ content: "\41"; } | |
| .icon-apple_pay:before{ content: "\e90c"; } | |
| .icon-arrow-down:before{ content: "\e607"; } | |
| .icon-arrow-left:before{ content: "\e901"; } | |
| .icon-arrow-right:before{ content: "\e902"; } | |
| .icon-bitcoin:before{ content: "\42"; } | |
| .icon-cart:before{ content: "\e600"; } | |
| .icon-cirrus:before{ content: "\e904"; } | |
| .icon-customer:before{ content: "\e605"; } | |
| .icon-dankort:before{ content: "\64"; } | |
| .icon-diners_club:before{ content: "\63"; } | |
| .icon-discover:before{ content: "\44"; } | |
| .icon-dogecoin:before{ content: "\e908"; } | |
| .icon-dwolla:before{ content: "\e903"; } | |
| .icon-facebook:before{ content: "\e609"; } | |
| .icon-fancy:before{ content: "\46"; } | |
| .icon-forbrugsforeningen:before{ content: "\e905"; } | |
| .icon-google_plus:before{ content: "\e90a"; } | |
| .icon-hamburger:before{ content: "\e601"; } | |
| .icon-instagram:before{ content: "\e907"; } | |
| .icon-interac:before{ content: "\49"; } | |
| .icon-jcb:before{ content: "\4a"; } | |
| .icon-litecoin:before{ content: "\e909"; } | |
| .icon-maestro:before{ content: "\e906"; } | |
| .icon-master:before{ content: "\e90b"; } | |
| .icon-minus:before{ content: "\e602"; } | |
| .icon-paypal:before{ content: "\50"; } | |
| .icon-pinterest:before{ content: "\e608"; } | |
| .icon-plus:before{ content: "\e603"; } | |
| .icon-rss:before{ content: "\72"; } | |
| .icon-search:before{ content: "\73"; } | |
| .icon-shopify_pay:before{ content: "\e900"; } | |
| .icon-snapchat:before{ content: "\e90d"; } | |
| .icon-tumblr:before{ content: "\74"; } | |
| .icon-twitter:before{ content: "\54"; } | |
| .icon-vimeo:before{ content: "\76"; } | |
| .icon-visa:before{ content: "\56"; } | |
| .icon-x:before{ content: "\e604"; } | |
| .icon-youtube:before{ content: "\79"; } | |
| .payment-icons { | |
| @include prefix('user-select', 'none'); | |
| cursor: default; | |
| li { | |
| margin: 0 ($gutter / 4) ($gutter / 4); | |
| color: {{ settings.color_footer_social_link }}; | |
| cursor: default; | |
| } | |
| .icon { | |
| font-size: 30px; | |
| line-height: 20px; | |
| } | |
| .fallback-text { | |
| text-transform: capitalize; | |
| } | |
| } | |
| .social-icons li { | |
| margin: 0 ($gutter / 2) ($gutter / 2); | |
| vertical-align: middle; | |
| @include at-query ($min, $postSmall) { | |
| margin-left: 0; | |
| } | |
| .icon { | |
| font-size: 26px; | |
| line-height: 20px; | |
| } | |
| a { | |
| color: {{ settings.color_footer_social_link }}; | |
| &:hover { | |
| color: darken({{ settings.color_footer_social_link }}, 10%); | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Pagination (Including Shopify Product Reviews) | |
| ==============================================================================*/ | |
| .pagination { | |
| margin-bottom: 1em; | |
| } | |
| /*================ Custom Pagination ================*/ | |
| .pagination-custom, .sky-pilot-pagination { | |
| display: inline-block; | |
| padding-left: 0; | |
| margin: 0 0 $gutter; | |
| border-radius: $radius; | |
| } | |
| .pagination-custom > li, .sky-pilot-pagination span | |
| { | |
| display: inline; | |
| } | |
| .spr-pagination > div{ | |
| display: inline-block; | |
| } | |
| .spr-summary-actions-newreview{ | |
| @extend .btn; | |
| } | |
| .spr-pagination .spr-pagination-page, | |
| .spr-pagination .spr-pagination-next, | |
| .spr-pagination .spr-pagination-prev { | |
| display: inline; | |
| position: relative; | |
| } | |
| .pagination-custom > li > a, | |
| .pagination-custom > li > span, | |
| .spr-pagination-page > a, | |
| .spr-pagination-page.is-active, | |
| .spr-pagination .spr-pagination-deco, | |
| .spr-pagination-next > a, | |
| .spr-pagination-prev > a, | |
| .sky-pilot-pagination > span > a{ | |
| position: relative; | |
| float: left; | |
| padding: 5px 10px; | |
| margin-left: -1px; | |
| line-height: 1.42; | |
| text-decoration: none; | |
| border: 1px solid $colorBorder; | |
| } | |
| .pagination-custom > li:first-child > a, | |
| .pagination-custom > li:first-child > span, | |
| .spr-pagination > div > span:first-child > a, | |
| .spr-pagination > div > span:first-child.is-active, | |
| .sky-pilot-pagination > span:first-child > a | |
| { | |
| margin-left: 0; | |
| border-bottom-left-radius: 4px; | |
| border-top-left-radius: 4px; | |
| } | |
| .pagination-custom > li:last-child > a, | |
| .pagination-custom > li:last-child > span, | |
| .spr-pagination > div > span:last-child > a, | |
| .spr-pagination > div > span:last-child.is-active, | |
| .sky-pilot-pagination > span:last-child > a | |
| { | |
| border-top-right-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .pagination-custom > li > a:hover, | |
| .pagination-custom > li > span:hover, | |
| .pagination-custom > li > a:focus, | |
| .pagination-custom > li > span:focus, | |
| .sky-pilot-pagination > span > a:hover | |
| { | |
| color: $colorSplash; | |
| } | |
| .pagination-custom > .active > a, | |
| .pagination-custom > .active > span, | |
| .pagination-custom > .active > a:hover, | |
| .pagination-custom > .active > span:hover, | |
| .pagination-custom > .active > a:focus, | |
| .pagination-custom > .active > span:focus { | |
| z-index: 2; | |
| cursor: default; | |
| color: $colorTextBody; | |
| } | |
| .pagination-custom > .disabled > span, | |
| .pagination-custom > .disabled > a, | |
| .pagination-custom > .disabled > a:hover, | |
| .pagination-custom > .disabled > a:focus { | |
| color: #999999; | |
| cursor: not-allowed; | |
| } | |
| .pagination-custom-lg > li > a, | |
| .pagination-custom-lg > li > span { | |
| padding: 10px 16px; | |
| font-size: em(18px); | |
| } | |
| .pagination-custom-lg > li:first-child > a, | |
| .pagination-custom-lg > li:first-child > span { | |
| border-bottom-left-radius: 6px; | |
| border-top-left-radius: 6px; | |
| } | |
| .pagination-custom-lg > li:last-child > a, | |
| .pagination-custom-lg > li:last-child > span { | |
| border-top-right-radius: 6px; | |
| border-bottom-right-radius: 6px; | |
| } | |
| .pagination-custom-sm > li > a, | |
| .pagination-custom-sm > li > span { | |
| padding: 5px 10px; | |
| font-size: em(12px); | |
| } | |
| .pagination-custom-sm > li:first-child > a, | |
| .pagination-custom-sm > li:first-child > span { | |
| border-bottom-left-radius: 3px; | |
| border-top-left-radius: 3px; | |
| } | |
| .pagination-custom-sm > li:last-child > a, | |
| .pagination-custom-sm > li:last-child > span { | |
| border-top-right-radius: 3px; | |
| border-bottom-right-radius: 3px; | |
| } | |
| /*============================================================================ | |
| #Site Header | |
| ==============================================================================*/ | |
| $infoBarHeight: 20px; | |
| $infoBarPadding: 5px; | |
| .info-bar--upper{ | |
| height: auto !important; | |
| } | |
| .info-bar{ | |
| background-color: $colorInfoBg; | |
| color: $colorInfoText; | |
| padding: $infoBarPadding 0; | |
| min-height: $infoBarHeight + (2*$infoBarPadding);; | |
| a:link{ | |
| color: $colorInfoText; | |
| text-decoration: none; | |
| } | |
| a:visited, | |
| a:focus, | |
| a:active, | |
| a:hover{ | |
| color: rgba($colorInfoText, 0.9); | |
| text-decoration: underline; | |
| } | |
| .wrapper{position: relative;} | |
| :after{ | |
| position: absolute; | |
| z-index: 500; | |
| left: 0; | |
| top: 0; | |
| width: $gutter/2; | |
| height: $infoBarHeight + $infoBarPadding; | |
| background-color: $colorInfoBg; | |
| } | |
| } | |
| .header-message--crowded{ | |
| padding: 0 25px 0 25px; | |
| } | |
| .header-account-link{ | |
| float: left; | |
| } | |
| .header-message { | |
| line-height: $infoBarHeight; | |
| margin-bottom: 0; | |
| } | |
| .site-header { | |
| position: relative; | |
| background-color: $colorNav; | |
| border-bottom: 1px solid $colorNavBorder; | |
| } | |
| .logo-wrapper{ | |
| max-width: 80%; | |
| } | |
| .header-logo { | |
| @extend .title; | |
| text-align: left; | |
| margin: 0; | |
| a{ | |
| text-decoration: none; | |
| color: $colorNavText; | |
| } | |
| a:hover, | |
| a:focus { | |
| text-decoration: none; | |
| color: darken($colorNavText, 10%); | |
| } | |
| a, | |
| img { | |
| display: block; | |
| } | |
| } | |
| .header--small .logo-image{ max-height: 40px; } | |
| .header--medium .logo-image{ max-height: 60px; } | |
| .header--large .logo-image{ max-height: 80px; } | |
| .header--xl .logo-image{ max-height: 100px; } | |
| .header--small .nav--desktop .header-menu > ul > li > a{ | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .header--medium .nav--desktop .header-menu > ul > li > a{ | |
| padding-top: 30px; | |
| padding-bottom: 30px; | |
| } | |
| .header--large .nav--desktop .header-menu > ul > li > a{ | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .header--xl .nav--desktop .header-menu > ul > li > a{ | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| } | |
| /*================ Search bar in header ================*/ | |
| .search { | |
| max-width: 100%; | |
| margin-bottom: 0; | |
| display: block; | |
| } | |
| .header-search__wrapper{ | |
| position: absolute; | |
| top: -3px; | |
| right: ($gutter / 2); | |
| @include at-query ($min, $small) { | |
| right: $gutter; | |
| } | |
| } | |
| .header-search { | |
| text-align: right; | |
| background-color: transparent; | |
| .search-bar{ | |
| position: relative; | |
| z-index: 100; | |
| height: $infoBarHeight + 6px; | |
| color: $colorInfoBg; | |
| font-size: 16px; | |
| padding: 0 25px 0 0; | |
| text-align: right; | |
| border: none; | |
| margin-bottom: 0; | |
| border-bottom: 1px solid transparent; | |
| border-radius: 0px; | |
| width: 5px; | |
| -webkit-transition: all 0.3s ease-in-out; | |
| transition: all 0.3s ease-in-out; | |
| cursor: pointer; | |
| &:focus, | |
| &:active{ | |
| @include at-query ($min, $small) { | |
| width: 250px; | |
| } | |
| @include at-query ($max, $small) { | |
| width: $small; | |
| } | |
| border: none; | |
| cursor: text; | |
| padding: 0; | |
| margin-right: 24px; | |
| color: $colorInfoText; | |
| background-color: $colorInfoBg; | |
| border-bottom: 1px solid rgba($colorNav, 0.5); | |
| box-shadow: none; | |
| } | |
| } | |
| .search-btn{ | |
| position: absolute; | |
| top: 0; | |
| right: 0px; | |
| height: $infoBarHeight + 6px; | |
| border-top-right-radius: $radius; | |
| border-bottom-right-radius: $radius; | |
| width: 23px; | |
| background: url("{{ 'search.svg' | asset_url }}"); | |
| background-repeat: no-repeat; | |
| background-position: right 3px center; | |
| &:focus, | |
| &:active{ | |
| @if (lightness( $colorInfoBg ) > 40) { | |
| outline: none; | |
| box-shadow: 0 0 5px darken($colorInfoBg, 30%); | |
| } | |
| @else { | |
| outline: none; | |
| box-shadow: 0 0 5px lighten($colorInfoBg, 80%); | |
| } | |
| } | |
| } | |
| .input-group, | |
| .input-group-field { | |
| margin-bottom: 0; | |
| } | |
| } | |
| .lt-ie9 .header-search__wrapper .header-search .search .search-bar, | |
| .lt-ie9 .header-search__wrapper .header-search .search{ | |
| width: 250px !important; | |
| } | |
| /*============================================================================ | |
| #Site Nav and Dropdowns | |
| ==============================================================================*/ | |
| .main-menu { | |
| cursor: default; | |
| margin-bottom: 0px; | |
| ul { margin: 0;} | |
| li { | |
| margin: 0; | |
| display: block; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: $colorNavText; | |
| &:hover, | |
| &:active, | |
| &:focus, | |
| &.nav-focus{ | |
| color: $colorSplash; | |
| } | |
| } | |
| a:focus:active{ | |
| transform: translate(0px, 1px); | |
| } | |
| .main-menu--active a:focus{ | |
| color: darken($colorSplash, 15%); | |
| } | |
| } | |
| .main-menu--active > a{ | |
| color: $colorSplash; | |
| } | |
| .main-menu-dropdown{ | |
| background-color: $colorNav; | |
| } | |
| .logo-wrapper--image .header-logo{ | |
| line-height: 0; | |
| } | |
| /*================ Large / Small Display Logic ================*/ | |
| @include at-query($max, $medium){ | |
| .nav--mobile{ | |
| display: block; | |
| } | |
| .nav--desktop{ | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| } | |
| @include at-query($min, $medium){ | |
| .nav--desktop{ | |
| position: static; | |
| } | |
| .nav--mobile{ | |
| display: none; | |
| } | |
| } | |
| .showMobile { | |
| .nav--mobile { | |
| display: block; | |
| } | |
| .nav--desktop{ | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| } | |
| .showDesktop { | |
| .nav--desktop{ | |
| position: static; | |
| } | |
| .nav--mobile{ | |
| display: none; | |
| } | |
| } | |
| /*============================================================================ | |
| #Small Meganav | |
| ==============================================================================*/ | |
| .nav--mobile { | |
| .header-logo{ | |
| padding: $gutter/2 0; | |
| text-align: center; | |
| a, img{ | |
| display: inline-block; | |
| } | |
| .logo-image{ | |
| max-width: 80%; | |
| } | |
| } | |
| .logo-wrapper{ | |
| margin-left: 10%; | |
| } | |
| .mobile-wrapper{ | |
| @include clearfix; | |
| position: relative; | |
| } | |
| .header-hamburger, | |
| .header-cart{ | |
| position: absolute; | |
| top: 50%; | |
| z-index: 1000; | |
| margin-top:-12px; | |
| width: 25px; | |
| height: 25px; | |
| } | |
| .header-hamburger{ | |
| right: 0; | |
| background: url("{{ 'nav.svg' | asset_url }}") no-repeat left 0 center; | |
| } | |
| .header-cart{ | |
| left: 0; | |
| background: url("{{ 'cart.svg' | asset_url }}") no-repeat left 0 center; | |
| } | |
| .header-cart__bubble{ | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -14px; | |
| left: 19px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 12px; | |
| background-color: $colorNavText; | |
| color: transparent; | |
| } | |
| .header-menu, | |
| .main-menu-dropdown{ | |
| display: none; | |
| } | |
| .grandparent.main-menu--expanded > .main-menu-dropdown, | |
| .parent.main-menu--expanded > .main-menu-dropdown, | |
| .header-menu.main-menu--expanded{ | |
| display: block; | |
| } | |
| .main-menu--expanded > a{ | |
| color: $colorSplash; | |
| } | |
| /* Add padding for fat fingers */ | |
| .nav-carat{ | |
| padding-right: 9px; | |
| padding-left: 15px; | |
| float: right; | |
| } | |
| /* Show a plus to expand menu, minus to contract */ | |
| .main-menu--expanded > .nav-carat{ | |
| & > .plus{ | |
| display: none; | |
| } | |
| & > .minus{ | |
| display: block; | |
| } | |
| } | |
| .nav-carat .minus{ | |
| display: none; | |
| } | |
| .main-menu li a{ | |
| display: inline-block; | |
| padding-top: $gutter/2; | |
| padding-bottom: $gutter/2; | |
| @include uppercase(); | |
| } | |
| .main-menu li{ | |
| display: block; | |
| border-bottom: 1px solid rgba($colorNavBorder, .2); | |
| &.main-menu--expanded{ | |
| border-bottom: none; | |
| } | |
| } | |
| @include at-query($max, $medium){ | |
| .main-menu > li:nth-last-child(2){ | |
| border-bottom: none; | |
| } | |
| } | |
| .main-menu-dropdown ul{ | |
| margin-left: $gutter/2; | |
| } | |
| .meganav_image, | |
| .cart-text-link{ | |
| display: none !important; | |
| } | |
| @include at-query($min, $medium){ | |
| .mobile-wrapper{ | |
| position: initial; | |
| } | |
| .header-hamburger{ | |
| right: $gutter; | |
| } | |
| .header-cart{ | |
| left: $gutter; | |
| } | |
| .header-cart__bubble{ | |
| left: 19px + $gutter; | |
| } | |
| .header-menu{ | |
| position: absolute; | |
| right: 0; | |
| background-color: $colorNav; | |
| z-index: 9000; | |
| border-left: 1px solid $colorNavBorder; | |
| border-bottom: 1px solid $colorNavBorder; | |
| min-width: 400px; | |
| padding: $gutter; | |
| &.main-menu--expanded{ | |
| -webkit-animation-duration: 0.2s; | |
| animation-duration: 0.2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-name: slideInRight; | |
| animation-name: slideInRight; | |
| } | |
| } | |
| } | |
| } | |
| /* ie8 icon replacement*/ | |
| .lt-ie9 .nav--mobile .header-hamburger{ | |
| background: url("{{ 'nav.png' | asset_url }}"); | |
| background-position: right center; | |
| background-repeat: no-repeat; | |
| } | |
| .lt-ie9 .nav--mobile .header-cart{ | |
| background: url("{{ 'cart.png' | asset_url }}"); | |
| background-position: left center; | |
| background-repeat: no-repeat; | |
| } | |
| .lt-ie9 .header-search .search-bar{ | |
| background: url("{{ 'search.png' | asset_url }}"); | |
| background-position: right center; | |
| background-repeat: no-repeat; | |
| } | |
| .lt-ie9 .hero-image-overlay, | |
| .lt-ie9 .collection-image-overlay{ | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; | |
| } | |
| @-webkit-keyframes slideInRight { | |
| from { | |
| -webkit-transform: translate3d(100%, 0, 0); | |
| transform: translate3d(100%, 0, 0); | |
| visibility: visible; | |
| } | |
| 100% { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| -webkit-transform: translate3d(100%, 0, 0); | |
| transform: translate3d(100%, 0, 0); | |
| visibility: visible; | |
| } | |
| 100% { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| /*============================================================================ | |
| #Large Meganav | |
| ==============================================================================*/ | |
| .nav--desktop { | |
| display: table; | |
| width: 100%; | |
| .header-logo{ | |
| margin-bottom: 0; | |
| } | |
| .logo-wrapper, .mobile-wrapper { | |
| float:none; | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .header-hamburger, | |
| .nav-carat, | |
| .header-cart__bubble{ | |
| display: none !important; | |
| } | |
| .header-menu{ | |
| text-align: right; | |
| } | |
| .main-menu { | |
| font-size: 1.1em; | |
| display: inline-block; | |
| & > li { | |
| display: inline-block; | |
| &:first-child a { | |
| margin-left: $gutter/3; | |
| } | |
| & > a { | |
| display: block; | |
| margin-left: $gutter; | |
| white-space: nowrap; | |
| @include uppercase(); | |
| } | |
| } | |
| } | |
| .main-menu-dropdown { | |
| text-align: left; | |
| li{ padding-top: $gutter/4; } | |
| } | |
| /*================ Large MegaNav ================*/ | |
| .grandparent > .main-menu-dropdown{ | |
| display: none; | |
| position: absolute; | |
| background-color: $colorNav; | |
| width: 100%; | |
| left: 0; | |
| margin: 0; | |
| z-index: 5000; | |
| border-bottom: 1px solid $colorNavBorder; | |
| } | |
| .grandparent.hover > .main-menu-dropdown{ | |
| display: block; | |
| } | |
| .grandparent > .main-menu-dropdown ul{ | |
| max-width: $siteWidth; | |
| margin: 0 auto; | |
| padding: $gutter/3 $gutter 20px $gutter; | |
| @include clearfix(); | |
| &:first-child{ | |
| padding-left: 0; | |
| } | |
| } | |
| .grandparent > .main-menu-dropdown > ul > .parent > a{ | |
| border-bottom: 1px solid $colorNavBorder; | |
| width: 100%; | |
| display: inline-block; | |
| padding-bottom: 17px; | |
| } | |
| .grandparent .parent .child a{ | |
| @include uppercase(); | |
| } | |
| .meganav_image_wrapper{ | |
| float: right; | |
| padding-left: $gridGutter; | |
| padding-top: 10px; | |
| } | |
| .meganav_image{ | |
| vertical-align:top; | |
| @include box-sizing(); | |
| img{ | |
| max-width: 100%; | |
| max-height: 500px; | |
| } | |
| } | |
| /* catch the cast where a grandparent has a child */ | |
| .grandparent > .main-menu-dropdown > ul > .parent, | |
| .grandparent > .main-menu-dropdown > ul > .child{ | |
| float: left; | |
| min-height: 1px; | |
| padding-left: $gridGutter; | |
| padding-top: 0px; | |
| vertical-align: top; | |
| @include box-sizing(); | |
| & > a{ | |
| @include uppercase(); | |
| } | |
| } | |
| .kids-2.grandparent > .main-menu-dropdown > ul > li, | |
| .kids-1.grandparent > .main-menu-dropdown > ul > li{ | |
| width: 50%; | |
| &:nth-child(2n+1){ | |
| clear:both; | |
| } | |
| } | |
| .kids-3.grandparent > .main-menu-dropdown > ul > li, | |
| .kids-6.grandparent > .main-menu-dropdown > ul > li, | |
| .kids-9.grandparent > .main-menu-dropdown > ul > li{ | |
| width: 33.333%; | |
| &:nth-child(3n+1){ | |
| clear:both; | |
| } | |
| } | |
| .kids-4.grandparent > .main-menu-dropdown > ul > li, | |
| .kids-7.grandparent > .main-menu-dropdown > ul > li, | |
| .kids-8.grandparent > .main-menu-dropdown > ul > li{ | |
| width: 25%; | |
| &:nth-child(4n+1){ | |
| clear:both; | |
| } | |
| } | |
| .kids-5.grandparent > .main-menu-dropdown > ul > li, | |
| .kids-10.grandparent > .main-menu-dropdown > ul > li{ | |
| width: 20%; | |
| &:nth-child(5n+1){ | |
| clear:both; | |
| } | |
| } | |
| /*================ Large Dropdown ================*/ | |
| .main-menu > .parent > .main-menu-dropdown{ | |
| display: none; | |
| position: absolute; | |
| background-color: $colorNav; | |
| z-index: 5000; | |
| @include uppercase(); | |
| padding: 0 $gutter ($gutter*.75) $gutter; | |
| border-bottom: 1px solid $colorNavBorder; | |
| border-left: 1px solid $colorNavBorder; | |
| border-right: 1px solid $colorNavBorder; | |
| } | |
| .main-menu > .parent:hover > .main-menu-dropdown, | |
| .main-menu > .parent.hover > .main-menu-dropdown{ | |
| display: block; | |
| } | |
| .main-menu > .parent:first-child > .main-menu-dropdown{ | |
| margin-left: -30px; | |
| } | |
| } | |
| /*============================================================================ | |
| #Site Homepage | |
| ==============================================================================*/ | |
| .template-index .product__related{ | |
| display: none; | |
| } | |
| .template-index .main-content{ | |
| padding-bottom: 0px; | |
| } | |
| /*================ Spacing ================*/ | |
| .homepage-blog, | |
| .homepage-product, | |
| .homepage-columns, | |
| .homepage-instagram, | |
| .homepage-collection{ | |
| padding-top: $gutter*3; | |
| padding-bottom: $gutter*3; | |
| } | |
| .homepage-page{ | |
| padding-top: $gutter*3; | |
| padding-bottom: $gutter*2; | |
| } | |
| .homepage-collection-grid{ | |
| padding-top: $gutter*2; | |
| padding-bottom: $gutter*3; | |
| } | |
| .homepage-logos{ | |
| padding-top: $gutter; | |
| padding-bottom: $gutter - 10px; | |
| } | |
| .homepage-logos.homepage-logos--tall{ | |
| padding-top: $gutter*2; | |
| padding-bottom: $gutter*2; | |
| } | |
| .adjust--white + .adjust--white, | |
| .adjust--light + .adjust--light, | |
| .adjust--splash + .adjust--splash, | |
| .adjust--dark + .adjust--dark{ | |
| .homepage-page, | |
| .homepage-blog, | |
| .homepage-logos, | |
| .homepage-columns, | |
| .homepage-product, | |
| .homepage-collection, | |
| .homepage-collection-grid, | |
| .homepage-instagram{ | |
| padding-top: 0px; | |
| } | |
| } | |
| .homepage-collection .product-grid-item{ margin-bottom: 0; } | |
| /*================ Titles ================*/ | |
| .home__title{ | |
| @extend .title; | |
| margin-bottom: $gutter/2; | |
| @include at-query($max, $small){ font-size: 2em; } | |
| } | |
| .home__subtitle{ | |
| @extend .uppercase; | |
| text-align: center; | |
| font-weight: bold; | |
| opacity: 0.75; | |
| font-size: 1em; | |
| padding-bottom: $gutter/2; | |
| margin-bottom: $gutter; | |
| position: relative; | |
| &::after{ | |
| content: ""; | |
| margin: auto; | |
| width: 30px; | |
| height: 3px; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: black; | |
| opacity: 0.2; | |
| } | |
| } | |
| a .home__title, | |
| a .home__subtitle{ | |
| text-decoration: none; | |
| } | |
| .homepage-image.homepage--white a .home__title, | |
| .homepage-image.homepage--white a .home__subtitle, | |
| .homepage-image.homepage--white a .title--flex, | |
| .homepage-image.homepage--white a .content--flex{ | |
| color: #ffffff; | |
| } | |
| .homepage-image.homepage--light a .home__title, | |
| .homepage-image.homepage--light a .home__subtitle, | |
| .homepage-image.homepage--light a .title--flex, | |
| .homepage-image.homepage--light a .content--flex{ | |
| color: $colorHomeLight; | |
| } | |
| .homepage-image.homepage--splash a .home__title, | |
| .homepage-image.homepage--splash a .home__subtitle, | |
| .homepage-image.homepage--splash a .title--flex, | |
| .homepage-image.homepage--splash a .content--flex{ | |
| color: $colorSplash; | |
| } | |
| .homepage-image.homepage--dark a .home__title, | |
| .homepage-image.homepage--dark a .home__subtitle, | |
| .homepage-image.homepage--dark a .title--flex, | |
| .homepage-image.homepage--dark a .content--flex{ | |
| color: $colorHomeDark; | |
| } | |
| .homepage--dark .home__subtitle::after{ | |
| background: #fff; | |
| } | |
| /*================ Colors ================*/ | |
| .homepage--white{ | |
| background-color: #fff; | |
| } | |
| .homepage--light{ | |
| background-color: $colorHomeLight; | |
| } | |
| .homepage--splash{ | |
| background-color: $colorSplash; | |
| } | |
| .homepage--dark{ | |
| background-color: $colorHomeDark; | |
| } | |
| .homepage-product .product-page{ | |
| background-color: transparent; | |
| } | |
| .homepage-image.homepage--splash, .color-text.homepage--splash{ color: $colorSplash; background-color: transparent;} | |
| .homepage-image.homepage--dark, .color-text.homepage--dark{ color: $colorHomeDark; background-color: transparent;} | |
| .homepage-image.homepage--white{ color: #ffffff; background-color: transparent; } | |
| .homepage-image.homepage--light{ color: $colorHomeLight; background-color: transparent;} | |
| .color-text.homepage--white, .color-text.homepage--light{ color: $colorTextBody; background-color: transparent; } | |
| .homepage--splash, | |
| .homepage--dark{ | |
| color: #fff; | |
| .on-sale, | |
| .figcaption a, | |
| .js-qty__adjust, | |
| .ajaxcart__qty-adjust, | |
| .js-qty input[type="text"], | |
| .figcaption a .price_wrapper, | |
| .ajaxcart__qty input[type="text"], | |
| input, textarea, button, select{ | |
| color: #fff; | |
| } | |
| .on-sale .compare-at{ | |
| color: rgba(#fff, 0.5); | |
| } | |
| .btn--clear{ | |
| color: white; | |
| border: 1px solid white; | |
| } | |
| .btn--clear.disabled { | |
| border: 1px solid rgba(#000, 0.3); | |
| color: rgba(#fff, 0.3); | |
| } | |
| .blog__article{ | |
| background-color: #fff; | |
| color: $colorTextBody; | |
| border: none; | |
| } | |
| } | |
| .homepage--splash .blog__article .btn--splash{ | |
| background-color: darken($colorSplash, 10%); | |
| &:hover{ | |
| background-color: darken($colorSplash, 15%); | |
| } | |
| } | |
| .homepage-image.homepage--white .btn--clear { | |
| color: #fff; | |
| border: 1px solid #fff; | |
| &:hover, &:focus, &:active{ | |
| color: #000; | |
| background-color: #fff; | |
| } | |
| } | |
| .homepage-image.homepage--light .btn--clear { | |
| color: $colorHomeLight; | |
| border: 1px solid $colorHomeLight; | |
| &:hover, &:focus, &:active{ | |
| color: $colorHomeDark; | |
| background-color: $colorHomeLight; | |
| } | |
| } | |
| .homepage-image.homepage--splash .btn--clear{ | |
| color: $colorSplash; | |
| border: 1px solid $colorSplash; | |
| &:hover, &:focus, &:active{ | |
| color: #ffffff; | |
| background-color: $colorSplash; | |
| } | |
| } | |
| .homepage-image.homepage--dark .btn--clear { | |
| color: $colorHomeDark; | |
| border: 1px solid $colorHomeDark; | |
| &:hover, &:focus, &:active{ | |
| color: #ffffff; | |
| background-color: $colorHomeDark; | |
| } | |
| } | |
| /*================ Shared Image Classes ================*/ | |
| .homepage-image{ | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .background-size-cover{ | |
| display: block; | |
| background-size: cover; | |
| background-position: center center; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| z-index: 1; | |
| } | |
| .responsive-wide-image{ | |
| width: 100%; | |
| display: block; | |
| } | |
| .content--centered{ | |
| position: absolute; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| width: 90%; | |
| left: 0; | |
| right: 0; | |
| margin: 0 auto; | |
| text-align: center; | |
| z-index: 100; | |
| max-width: $siteWidth - $gutter*2; | |
| } | |
| .ie9 .content--centered{ | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| .use_screen_full{ height: 100vh; } | |
| .use_screen_three_quarters{ height: 75vh; } | |
| .use_screen_two_thirds{ height: 66vh; } | |
| .use_screen_one_half{ height: 50vh; } | |
| .use_screen_one_third{ height: 33vh; } | |
| .use_screen_one_fifth{ height: 20vh; } | |
| .image--flex{ | |
| max-width: 100%; | |
| zoom: 50%; | |
| -moz-transform:scale(0.5); | |
| } | |
| .title--flex{ | |
| margin-bottom: 0.5em; | |
| @extend .title; | |
| margin-bottom: $gutter/2; | |
| } | |
| .content--flex{ | |
| margin-bottom: 1.5em; | |
| } | |
| @include at-query($max, $medium){ | |
| .title--flex{ | |
| font-size: 2em; | |
| } | |
| .content--flex{ | |
| font-size: 1.3em; | |
| } | |
| .content--centered .btn--large{ | |
| padding: 8px 10px; | |
| font-size: 0.8em; | |
| } | |
| } | |
| .image-overlay{ | |
| position: absolute; | |
| top:0; | |
| bottom:0; | |
| left:0; | |
| right:0; | |
| z-index: 10; | |
| } | |
| .homepage--white .image-overlay, | |
| .homepage--light .image-overlay{ | |
| background-color: #000; | |
| } | |
| .homepage--splash .image-overlay, | |
| .homepage--dark .image-overlay{ | |
| background-color: #FFF; | |
| } | |
| .image-overlay-0{ opacity: 0;} | |
| .image-overlay-5{ opacity: 0.05;} | |
| .image-overlay-10{ opacity: 0.10;} | |
| .image-overlay-15{ opacity: 0.15;} | |
| .image-overlay-20{ opacity: 0.20;} | |
| .image-overlay-25{ opacity: 0.35;} | |
| .image-overlay-30{ opacity: 0.30;} | |
| .image-overlay-35{ opacity: 0.35;} | |
| .image-overlay-40{ opacity: 0.40;} | |
| .image-overlay-45{ opacity: 0.45;} | |
| .image-overlay-50{ opacity: 0.50;} | |
| .image-overlay-55{ opacity: 0.55;}; | |
| .image-overlay-60{ opacity: 0.60;} | |
| .image-overlay-65{ opacity: 0.65;} | |
| .image-overlay-70{ opacity: 0.70;} | |
| .image-overlay-75{ opacity: 0.75;} | |
| .image-overlay-80{ opacity: 0.80;} | |
| .image-overlay-85{ opacity: 0.85;} | |
| .image-overlay-90{ opacity: 0.90;} | |
| .image-overlay-95{ opacity: 0.95;} | |
| .image-overlay-100{ opacity: 1;} | |
| .placeholder-svg { | |
| fill: #b4b6b9; | |
| background-color: #f4f4f4; | |
| width: 100%; | |
| height: 100%; | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| .homepage-logos .placeholder-svg { | |
| background-color: #f7f7f7; | |
| display: block; | |
| } | |
| /*================ Video ================*/ | |
| .homepage-video__play{ | |
| margin-top: .5em; | |
| } | |
| .homepage-video__play{ | |
| @include at-query($max, $medium){ | |
| .icon-play{ | |
| height: 80px; | |
| width: 66px; | |
| background-size: 66px 66px; | |
| } | |
| } | |
| opacity: 1; | |
| @include transition(opacity 0.2s ease-out); | |
| &:hover{ | |
| opacity: 0.75; | |
| } | |
| &:focus, | |
| &:active{ | |
| outline: none; | |
| } | |
| } | |
| /*=== Hero Scroll ==*/ | |
| .index-sections > .shopify-section:not(:first-child) .scroll_icon_wrap{ | |
| display: none; | |
| } | |
| .scroll_icon_wrap { | |
| text-align: center; | |
| position: absolute; | |
| margin-left: auto; | |
| margin-right: auto; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 400; | |
| @include at-query($max, $small){ | |
| display: none; | |
| } | |
| } | |
| .scroll_link{ | |
| display: block; | |
| position: absolute; | |
| text-align: center; | |
| left: 50%; | |
| width: 250px; | |
| margin-left: -125px; | |
| bottom: 0px; | |
| padding-bottom: 20px; | |
| padding-top: 20px; | |
| height: 60px; | |
| &:hover .scroll_icon{ | |
| opacity: 1; | |
| } | |
| &:focus{ | |
| outline: none; | |
| } | |
| } | |
| .scroll_icon { | |
| opacity: 0.7; | |
| position: absolute; | |
| left: 50%; | |
| bottom: 20px; | |
| margin-left: -25px; | |
| zoom: 50%; | |
| -moz-transform:scale(0.5); | |
| } | |
| .homepage-image .scroll__link{ | |
| position: absolute; | |
| bottom: 0; | |
| } | |
| .bloop { | |
| -webkit-transform-origin: center bottom; | |
| transform-origin: center bottom; | |
| animation: bloop 1.8s infinite; | |
| -webkit-animation: bloop 1.8s infinite; | |
| } | |
| @-webkit-keyframes bloop { | |
| from, 20%, 30%, 40%, 50%, 60%, to { | |
| -webkit-transform: translate3d(0,0,0); | |
| transform: translate3d(0,0,0); | |
| } | |
| 15% { | |
| -webkit-animation-timing-function: ease-in; | |
| animation-timing-function: ease-out; | |
| -webkit-transform: translate3d(0, -12px, 0); | |
| transform: translate3d(0, -12px, 0); | |
| } | |
| 25% { | |
| -webkit-animation-timing-function: ease-out; | |
| animation-timing-function: ease-out; | |
| -webkit-transform: translate3d(0,6px,0); | |
| transform: translate3d(0,6px,0); | |
| } | |
| 35% { | |
| -webkit-animation-timing-function: ease-in; | |
| animation-timing-function: ease-out; | |
| -webkit-transform: translate3d(0,-3px,0); | |
| transform: translate3d(0,-3px,0); | |
| } | |
| 45% { | |
| -webkit-animation-timing-function: ease-out; | |
| animation-timing-function: ease-in; | |
| -webkit-transform: translate3d(0,2px,0); | |
| transform: translate3d(0,2px,0); | |
| } | |
| } | |
| @keyframes bloop { | |
| from, 20%, 30%, 40%, 50%, 60%, to { | |
| -webkit-transform: translate3d(0,0,0); | |
| transform: translate3d(0,0,0); | |
| } | |
| 15% { | |
| -webkit-animation-timing-function: ease-in; | |
| animation-timing-function: ease-out; | |
| -webkit-transform: translate3d(0, -12px, 0); | |
| transform: translate3d(0, -12px, 0); | |
| } | |
| 25% { | |
| -webkit-animation-timing-function: ease-out; | |
| animation-timing-function: ease-out; | |
| -webkit-transform: translate3d(0,6px,0); | |
| transform: translate3d(0,6px,0); | |
| } | |
| 35% { | |
| -webkit-animation-timing-function: ease-in; | |
| animation-timing-function: ease-out; | |
| -webkit-transform: translate3d(0,-3px,0); | |
| transform: translate3d(0,-3px,0); | |
| } | |
| 45% { | |
| -webkit-animation-timing-function: ease-out; | |
| animation-timing-function: ease-in; | |
| -webkit-transform: translate3d(0,2px,0); | |
| transform: translate3d(0,2px,0); | |
| } | |
| } | |
| /*=============== Columns ===============*/ | |
| .home--uppercase{ | |
| font-weight: bold; | |
| opacity: 0.75; | |
| font-size: 1em; | |
| } | |
| @include at-query ($max, $small) { | |
| .homepage-columns .grid__item:not(:last-child) a.btn{ | |
| margin-bottom: 40px; | |
| } | |
| } | |
| /*=============== Image Columns ===============*/ | |
| .homepage-double{ | |
| background-color: $colorBody; | |
| } | |
| .homepage-double form{ | |
| margin-bottom: 0; | |
| } | |
| .double__block{ | |
| position: relative; | |
| overflow: hidden; | |
| .home__subtitle{ | |
| text-align: inherit; | |
| margin-bottom: $gutter/2 + 2px; | |
| } | |
| .content--centered{ | |
| max-width: $siteWidth/2 - $gutter*2; | |
| } | |
| } | |
| .homepage-double .double__block{ | |
| height: 100%; | |
| } | |
| .double__block .text-left .home__subtitle::after{ right: initial; } | |
| .double__block .text-right .home__subtitle::after{ left: initial; } | |
| @include at-query ($max, $small) { | |
| .homepage-double.use_screen_full{ height: auto; .double__block{ height: 100vh; } } | |
| .homepage-double.use_screen_three_quarters{ height: auto; .double__block{ height: 66vh; } } | |
| .homepage-double.use_screen_two_thirds{ height: auto; .double__block{ height: 66vh; } } | |
| .homepage-double.use_screen_one_half{ height: auto; .double__block{ height: 50vh; } } | |
| .homepage-double.use_screen_one_third{ height: auto; .double__block{ height: 33vh; } } | |
| .homepage-double.use_screen_one_fifth{ height: auto; .double__block{ height: 20vh; } } | |
| } | |
| .rte--homepage{ | |
| font-size: 1.2em; | |
| margin-bottom: 0; | |
| } | |
| /*============================================================================ | |
| Collection grid section | |
| ==============================================================================*/ | |
| .collection-grid-item { | |
| position: relative; | |
| width: 100%; | |
| min-height: 265px; | |
| margin-top: 30px; | |
| @include at-query($max, $medium) { | |
| padding: 0 30; | |
| } | |
| } | |
| .collection-grid--single{ | |
| @include at-query($min, $large) { | |
| margin-left: 25%; | |
| } | |
| } | |
| .collection-grid-item__overlay { | |
| position: relative; | |
| display: block; | |
| height: 100%; | |
| width: 100%; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center center; | |
| @include transition(transform 1.1s ease-out); | |
| } | |
| .collection-grid-item__content{ | |
| @extend .content--centered; | |
| .home__title{ | |
| margin-bottom: 1.2em; | |
| } | |
| .home__title, .btn { | |
| @include transition(transform .15s ease-out); | |
| } | |
| } | |
| .collection-grid-item__link { | |
| border: 2px solid transparent; | |
| position: absolute; | |
| overflow: hidden; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| &:focus { | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| &:hover, | |
| &:focus { | |
| .collection-grid-item__overlay{ | |
| @include transform(scale(1.05)); | |
| } | |
| .btn{ | |
| -webkit-transform: translateY(-2px); | |
| -ms-transform: translateY(-2px); | |
| transform: translateY(-2px); | |
| } | |
| .home__title{ | |
| -webkit-transform: translateY(2px); | |
| -ms-transform: translateY(2px); | |
| transform: translateY(2px); | |
| } | |
| } | |
| } | |
| // trigger button hover state on card hover | |
| .collection-grid-item__link { | |
| &:hover, | |
| &:focus { | |
| .btn--splash{ | |
| background-color: darken($colorSplash, 10%); | |
| } | |
| .btn--outline{ | |
| color: $colorHomeDark; | |
| } | |
| } | |
| } | |
| .homepage-image.homepage--white .collection-grid-item__link{ | |
| &:hover, | |
| &:focus { | |
| .btn--clear{ | |
| color: #000; | |
| background-color: #fff; | |
| } | |
| } | |
| } | |
| .homepage-image.homepage--light .collection-grid-item__link{ | |
| &:hover, | |
| &:focus { | |
| .btn--clear{ | |
| color: $colorHomeDark; | |
| background-color: $colorHomeLight; | |
| } | |
| } | |
| } | |
| .homepage-image.homepage--splash .collection-grid-item__link{ | |
| &:hover, | |
| &:focus { | |
| .btn--clear{ | |
| color: #ffffff; | |
| background-color: $colorSplash; | |
| } | |
| } | |
| } | |
| .homepage-image.homepage--dark .collection-grid-item__link{ | |
| &:hover, | |
| &:focus { | |
| .btn--clear{ | |
| color: #ffffff; | |
| background-color: $colorHomeDark; | |
| } | |
| } | |
| } | |
| /*================ Page ================*/ | |
| .homepage-page{ | |
| hr{ | |
| width: 75%; | |
| margin-left: 12%; | |
| } | |
| } | |
| .homepage-page__content{ | |
| text-align: center; | |
| font-size: 1.2em; | |
| margin-bottom: 30px; | |
| } | |
| /*================ Instagram ================*/ | |
| .instagram--square{ | |
| position: absolute; | |
| display: block; | |
| border-width: 1px; | |
| border-style: solid; | |
| background-size: cover; | |
| background-position: center center; | |
| overflow: hidden; | |
| } | |
| @mixin instagram-squares($namespace:"") { | |
| .instagram--square.#{$namespace}one-half { width: 50%; height: 50vw; } | |
| .instagram--square.#{$namespace}one-third { width: 33.333%; height: 33.333vw; } | |
| .instagram--square.#{$namespace}one-quarter { width: 25%; height: 25vw; } | |
| .instagram--square.#{$namespace}one-fifth { width: 20%; height: 20vw; } | |
| .instagram--square.#{$namespace}one-sixth { width: 16.666%; height: 16.666vw; } | |
| } | |
| @each $name in $breakpoint-has-widths { | |
| @include grid-media-query($name) { | |
| @include instagram-squares('#{$name}--'); | |
| } | |
| } | |
| .homepage--dark .instagram--square{ border-color: $colorHomeDark; } | |
| .homepage--light .instagram--square{ border-color: $colorHomeLight; } | |
| .homepage--splash .instagram--square{ border-color: $colorSplash; } | |
| .homepage--white .instagram--square{ border-color: #fff; } | |
| .homepage-instagram{ | |
| .grid-uniform{ | |
| margin-left: 0; | |
| } | |
| a{ | |
| position: relative; | |
| color: white; | |
| text-align: center; | |
| font-size: 2em; | |
| } | |
| a:hover::after{ | |
| content:''; | |
| background-color: black; | |
| position: absolute; | |
| opacity: 0.5; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 100; | |
| } | |
| .icon{ | |
| position: absolute; | |
| z-index: 200; | |
| bottom: 5px; | |
| width: 27px; | |
| height: 27px; | |
| left: 50%; | |
| margin-left: -12px; | |
| opacity: 0; | |
| @include transition(all .2s ease-out); | |
| } | |
| a:hover .icon{ | |
| opacity: 1; | |
| bottom: 47%; | |
| } | |
| a img{ | |
| display: block; | |
| } | |
| } | |
| .homepage-instagram .placeholder-svg{ | |
| vertical-align: middle; | |
| border-bottom: 1px solid #fff; | |
| border-right: 1px solid #fff; | |
| } | |
| /*================ Logos ================*/ | |
| .logo-bar { | |
| text-align: center; | |
| margin-top: -10px; | |
| } | |
| .logo-bar__item { | |
| display: inline-block; | |
| vertical-align: middle; | |
| max-width: 160px; // logo width | |
| margin: 10px 30px; // logo spacing | |
| @include at-query ($max, $small) { | |
| max-width: 110px; // logo width | |
| margin: 10px 10px; // logo spacing | |
| } | |
| } | |
| .logo-bar__image { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 100%; | |
| } | |
| .logo-bar__link { | |
| display: block; | |
| } | |
| /*============================================================================ | |
| #Site Footer | |
| ==============================================================================*/ | |
| .site-footer-wrapper { | |
| position: relative; | |
| background-color: $colorFooterBg; | |
| color: $colorFooterText; | |
| text-align: left; | |
| hr { | |
| border-top: 1px solid rgba($colorFooterText, 0.5); | |
| } | |
| a{ | |
| color: $colorFooterText; | |
| &:hover{ | |
| color: rgba($colorFooterText, 0.9); | |
| } | |
| } | |
| } | |
| .footer-logo{ | |
| position: absolute; | |
| left: 50%; | |
| img { | |
| max-width: 120px; | |
| max-height: 80px; | |
| } | |
| } | |
| .footer-logo img{ | |
| z-index: 100; | |
| position: relative; | |
| } | |
| .site-footer { | |
| padding-top: $gutter*2; | |
| padding-bottom: $gutter; | |
| } | |
| .lt-ie9 .site-footer{ | |
| border-top: $gutter*2 solid $colorFooterBg; | |
| } | |
| .footer-quicklinks li{ | |
| margin: 0 0 $gutter/2 0; | |
| } | |
| .footer-secondary, | |
| .footer-quicklinks{ | |
| @include uppercase(); | |
| a{ | |
| text-decoration: none; | |
| &:hover, | |
| &:active, | |
| &:focus{ | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| .footer-secondary-wrapper{ | |
| text-align: center; | |
| position: relative; | |
| } | |
| .footer-secondary{ | |
| margin-bottom: 0; | |
| } | |
| .footer-social, | |
| .footer-payment{ | |
| @include uppercase(); | |
| margin-bottom: 0px; | |
| display: inline-block; | |
| a{ | |
| text-decoration: none; | |
| } | |
| @include at-query ($max, $large) { | |
| margin: $gutter 0 0 0; | |
| text-align: center; | |
| } | |
| } | |
| .footer-secondary{ | |
| li{ margin: $gutter*1.5 $gutter/2 0 $gutter/2; } | |
| } | |
| .footer-social, .footer-payment{ | |
| li{ margin: $gutter*1.5 $gutter/4 0 $gutter/4; } | |
| } | |
| @include at-query ($max, $small) { | |
| .footer-social, .footer-payment, .footer-secondary{ | |
| line-height: 2.5em; | |
| li{ margin: 5px 5px 0 5px; } | |
| } | |
| } | |
| .newsletter-form{ | |
| padding: 5px; | |
| border-radius: $radius; | |
| border: 1px solid darken($colorFooterBg, 20%); | |
| background-color: $colorBody; | |
| input{ | |
| border: none; | |
| &:active, | |
| &:focus{ | |
| border:none; | |
| box-shadow: none; | |
| } | |
| } | |
| } | |
| .input-group.newsletter-form .input-group-btn .btn{ | |
| border-radius: $radius; | |
| } | |
| /*============================================================================ | |
| #Product and Collection Grids | |
| ==============================================================================*/ | |
| .on-sale { | |
| color: $colorSplash; | |
| .compare-at{ | |
| margin-top: $gutter/2; | |
| text-decoration: line-through !important; | |
| color: rgba( $colorPrimary, 0.5); | |
| } | |
| } | |
| .figcaption a{ | |
| text-decoration: none; | |
| } | |
| .product__price{ | |
| @include at-query ($max, $medium){ | |
| margin-top: $gutter; | |
| margin-bottom: $gutter; | |
| } | |
| @include at-query ($min, $medium){ | |
| margin-bottom: $gutter*2; | |
| } | |
| } | |
| .add-to-cart__wrapper{ | |
| margin-top: 2.7em; | |
| } | |
| .product__arrows{ | |
| padding-bottom: $gutter; | |
| } | |
| .product-grid-item { | |
| display: block; | |
| position: relative; | |
| margin-bottom: $gutter; | |
| } | |
| .name_wrapper{ | |
| @include uppercase; | |
| } | |
| a .price_wrapper{ | |
| color: $colorTextBody; | |
| } | |
| .product__related{ | |
| margin-bottom: $gutter*2; | |
| } | |
| /*================ Collection ================*/ | |
| .product-grid-item .figcaption.hover .price_wrapper p, | |
| .product-grid-item .figcaption.hover .name_wrapper p { | |
| margin-bottom: $gutter/4; | |
| } | |
| @include at-query ($max, $large) { | |
| .product-grid-item .figcaption.hover{ | |
| position: relative; | |
| padding: $gutter/2 0; | |
| } | |
| } | |
| @include at-query ($min, $large) { | |
| .product-grid-item .figcaption.hover .price_wrapper p, | |
| .product-grid-item .figcaption.hover .name_wrapper p{ | |
| margin-bottom: $gutter/4; | |
| } | |
| .product-grid-item .figcaption.hover{ | |
| padding: $gutter/2 0; | |
| } | |
| .product-grid-item .figcaption.hover .price_wrapper{ | |
| opacity: 0; | |
| -ms-transform: translate(0px,10px); /* IE 9 */ | |
| -webkit-transform: translate(0px,10px); /* Safari */ | |
| transform: translate(0px,10px); | |
| -webkit-transition: all 0.2s ease-out; | |
| transition: all 0.2s ease-out; | |
| } | |
| .product-grid-item:hover .figcaption.hover .price_wrapper{ | |
| opacity: 1; | |
| -ms-transform: translate(0px,0px); /* IE 9 */ | |
| -webkit-transform: translate(0px,0px); /* Safari */ | |
| transform: translate(0px,0px); | |
| } | |
| .lt-ie9 .product-grid-item .figcaption.hover .price_wrapper{ | |
| opacity: 1; | |
| } | |
| } | |
| .product-grid-item .figcaption.under{ | |
| position: relative; | |
| padding: $gutter/2 0; | |
| } | |
| label.quatity-selector{ | |
| position: absolute; | |
| top: -20px; | |
| } | |
| @function set-accent-text-color($color) { | |
| @if (lightness($color) > 80) { | |
| @return $colorTextBody; // Lighter backgorund, return dark color | |
| } @else { | |
| @return #ffffff; // Darker background, return light color | |
| } | |
| } | |
| .sticker{ | |
| @include uppercase(); | |
| float:left; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| padding: 5px; | |
| background: $colorSplash; | |
| color: set-accent-text-color($colorSplash); | |
| } | |
| .image_autoheight_enable .sticker{ display: none; } | |
| .share__link{ | |
| @extend .uppercase; | |
| } | |
| /*=== Sensible heights for product grid images ===*/ | |
| .product-grid-item{ | |
| text-align: center; | |
| } | |
| .grid__image { | |
| display: block; | |
| position: relative; | |
| } | |
| .lt-ie9 .grid__image img, | |
| .ie9 .grid__image img{ | |
| top: 0; | |
| } | |
| html:not(.lt-ie9) .image_autoheight_enable{ | |
| $xl: 960px; | |
| $double-xl: 1120px; | |
| .grid__image img { | |
| max-height: 100%; | |
| position: relative; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| backface-visibility: hidden; | |
| } | |
| @include at-query($max, $small) { | |
| .small--one-whole > .grid__image{ | |
| height: auto !important; | |
| img{ | |
| max-height: none; | |
| top: auto; | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| } | |
| @media only screen and (min-width: ($small + 1px) ) and (max-width: ($medium) ){ | |
| .medium--one-whole > .grid__image{ | |
| height: auto !important; | |
| img{ | |
| max-height: none; | |
| top: auto; | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| } | |
| @include at-query($min, $large) { | |
| .large--one-whole > .grid__image{ | |
| height: auto !important; | |
| img{ | |
| max-height: none; | |
| top: auto; | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| } | |
| /* Small */ | |
| @include at-query($max, $small) { | |
| .small--one-half, | |
| .small--one-third, | |
| .medium--one-half, | |
| .medium--one-third, | |
| .medium--one-quarter, | |
| .medium--one-fifth, | |
| .medium--one-sixth, | |
| .large--one-half, | |
| .large--one-third, | |
| .large--one-quarter, | |
| .large--one-fifth, | |
| .large--one-sixth, | |
| .one-half, | |
| .one-third, | |
| .one-quarter, | |
| .one-fifth, | |
| .one-sixth{ | |
| .grid__image{ height: $small/2; } | |
| } | |
| .small--one-half .grid__image{ | |
| height: ($small - (2 * $gutter) ) / 2; | |
| } | |
| .small--one-third .grid__image{ | |
| height: ($small - (3 * $gutter) ) / 3; | |
| } | |
| .small--one-quarter .grid__image{ | |
| height: ($small - (4 * $gutter) ) / 4; | |
| } | |
| .small--one-fifth .grid__image{ | |
| height: ($small - (5 * $gutter) ) / 5; | |
| } | |
| .small--one-sixth .grid__image{ | |
| height: ($small - (6 * $gutter) ) / 6; | |
| } | |
| } | |
| /* Medium */ | |
| @media only screen and (min-width: ($small + 1px) ) and (max-width: ($medium) ){ | |
| .medium--one-half .grid__image, | |
| .one-half .grid__image { | |
| height: ($small - (2 * $gutter) ) / 2; | |
| } | |
| .medium--one-third .grid__image, | |
| .one-third .grid__image { | |
| height: ($small - (3 * $gutter) ) / 3; | |
| } | |
| .medium--one-quarter .grid__image, | |
| .one-quarter .grid__image { | |
| height: ($small - (4 * $gutter) ) / 4; | |
| } | |
| .medium--one-fifth .grid__image, | |
| .one-fifth .grid__image { | |
| height: ($small - (5 * $gutter) ) / 5; | |
| } | |
| .medium--one-sixth .grid__image, | |
| .one-sixth .grid__image { | |
| height: ($small - (6 * $gutter) ) / 6; | |
| } | |
| } | |
| /* Large */ | |
| @media only screen and (min-width: ($medium + 1px) ) and (max-width: ($xl) ){ | |
| .large--one-half .grid__image, | |
| .one-half .grid__image { | |
| height: ($medium - (2 * $gutter) ) / 2; | |
| } | |
| .large--one-third .grid__image, | |
| .one-third .grid__image { | |
| height: ($medium - (3 * $gutter) ) / 3; | |
| } | |
| .large--one-quarter .grid__image, | |
| .one-quarter .grid__image { | |
| height: ($medium - (4 * $gutter) ) / 4; | |
| } | |
| .large--one-fifth .grid__image, | |
| .one-fifth .grid__image { | |
| height: ($medium - (5 * $gutter) ) / 5; | |
| } | |
| .large--one-sixth .grid__image, | |
| .one-sixth .grid__image { | |
| height: ($medium - (6 * $gutter) ) / 6; | |
| } | |
| } | |
| /* XL */ | |
| @include at-query($min, $xl) { | |
| .large--one-half .grid__image, | |
| .one-half .grid__image { | |
| height: ($xl - (2 * $gutter) ) / 2; | |
| } | |
| .large--one-third .grid__image, | |
| .one-third .grid__image { | |
| height: ($xl - (3 * $gutter) ) / 3; | |
| } | |
| .large--one-quarter .grid__image, | |
| .one-quarter .grid__image { | |
| height: ($xl - (4 * $gutter) ) / 4; | |
| } | |
| .large--one-fifth .grid__image, | |
| .one-fifth .grid__image { | |
| height: ($xl - (5 * $gutter) ) / 5; | |
| } | |
| .large--one-sixth .grid__image, | |
| .one-sixth .grid__image { | |
| height: ($xl - (6 * $gutter) ) / 6; | |
| } | |
| } | |
| /* Double XL */ | |
| @include at-query($min, $double-xl) { | |
| .large--one-half .grid__image, | |
| .one-half .grid__image { | |
| height: ($double-xl - (2 * $gutter) ) / 2; | |
| } | |
| .large--one-third .grid__image, | |
| .one-third .grid__image { | |
| height: ($double-xl - (3 * $gutter) ) / 3; | |
| } | |
| .large--one-quarter .grid__image, | |
| .one-quarter .grid__image { | |
| height: ($double-xl - (4 * $gutter) ) / 4; | |
| } | |
| .large--one-fifth .grid__image, | |
| .one-fifth .grid__image { | |
| height: ($double-xl - (5 * $gutter) ) / 5; | |
| } | |
| .large--one-sixth .grid__image, | |
| .one-sixth .grid__image { | |
| height: ($double-xl - (6 * $gutter) ) / 6; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Collections | |
| ==============================================================================*/ | |
| .filter--active { | |
| font-weight: bold; | |
| } | |
| .collection{ | |
| background: $colorBody; | |
| padding-top: $gutter*2; | |
| padding-bottom: $gutter*4; | |
| .main-content{ padding-bottom: 0; } | |
| } | |
| .template-collection .main-content{ | |
| padding-bottom: 0; | |
| } | |
| .collection__sort{ | |
| font-size: 0.85em; | |
| } | |
| .toggle-filters{ | |
| border-color: $colorBorder; | |
| margin-bottom: $gutter/2; | |
| img{ display: block; } | |
| } | |
| /* toggle collection sidebar */ | |
| @include at-query ($max, $medium) { | |
| .collection__sort select{ | |
| font-size: 16px; | |
| } | |
| .collection__sort label{ | |
| display: none; | |
| } | |
| .collection-filters { | |
| display: none; | |
| } | |
| .collection-sidebar{ | |
| padding-top: 0; | |
| } | |
| } | |
| @include at-query ($min, $large) { | |
| .toggle-filters { | |
| display: none; | |
| } | |
| } | |
| /* Set thickness of active-state marker */ | |
| $borderThickness: 3px; | |
| $borderSpacing: 10px; | |
| .collection-nav{ | |
| margin-bottom: $gutter; | |
| .collection-nav--active > a{ | |
| border-left: $borderThickness solid $colorBorder; | |
| } | |
| & > li{ | |
| margin-bottom: $gutter/3; | |
| padding: 0px; | |
| a{ | |
| @extend .uppercase; | |
| padding-left: $gutter/3; | |
| margin-left: ($borderSpacing + $borderThickness) * -1; | |
| text-decoration: none; | |
| border-left: $borderThickness solid transparent; | |
| &:hover{ | |
| border-left: $borderThickness solid $colorSplash; | |
| } | |
| } | |
| } | |
| @include at-query($max, $medium){ | |
| border-top: 1px solid $colorBorder; | |
| margin-top: $borderSpacing; | |
| padding-top: $borderSpacing; | |
| } | |
| } | |
| .collection-nav--child{ | |
| margin-left: $borderSpacing + $borderThickness; | |
| & > li{ | |
| margin-bottom: $gutter/4; | |
| & > a{ | |
| border-left: $borderThickness solid rgba($colorBorder, 0.2); | |
| } | |
| } | |
| } | |
| .collection-list-item:not(first-child){ | |
| border-bottom: 1px solid $colorBorder; | |
| padding-top: $gutter*2; | |
| } | |
| /*============================================================================ | |
| #Breadcrumbs | |
| ==============================================================================*/ | |
| .breadcrumb { | |
| margin-bottom: $gutter; | |
| margin-top: 0 - $gutter; | |
| font-size: 0.7em; | |
| @include uppercase; | |
| a, | |
| span { | |
| display: inline-block; | |
| padding: ($gutter / 2) 7px ($gutter / 2) 0; | |
| margin-right: 7px; | |
| text-decoration: none; | |
| &:first-child { | |
| padding-left: 0; | |
| } | |
| } | |
| a:hover{ | |
| text-decoration: underline; | |
| } | |
| } | |
| /*============================================================================ | |
| #Product Page | |
| ==============================================================================*/ | |
| .template-product .main-content{ | |
| padding-bottom: 0; | |
| } | |
| .template-product .product-section > .wrapper:last-of-type{ | |
| padding-bottom: 120px; | |
| } | |
| .product-page{ | |
| padding-top: $gutter*2; | |
| padding-bottom: $gutter; | |
| background-color: {{ settings.product_background_color }}; | |
| } | |
| .selector-wrapper select, | |
| .product-form__variants{ | |
| margin: 0 auto 2em auto;; | |
| border-left: none; | |
| border-right: none; | |
| border-top: none; | |
| border-radius: 0px; | |
| text-align-last:center; | |
| padding-left: 28px; | |
| } | |
| .product-form__variants { | |
| display: none; | |
| .no-js & { | |
| display: block; | |
| } | |
| } | |
| .selector-wrapper label, .quantity-selector__wrapper label{ | |
| margin-top: 3em; | |
| text-align: center; | |
| @include uppercase(); | |
| } | |
| .product__slides{ | |
| margin-bottom: $gutter; | |
| overflow-y: hidden; | |
| a, img { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| li { | |
| margin-bottom: $gutter; | |
| } | |
| } | |
| .product__photo, | |
| .product__photo img{ | |
| @include at-query ($max, $medium) { | |
| max-height: $small; | |
| } | |
| @include at-query ($min, $medium) { | |
| max-height: $small * 1.5; | |
| } | |
| } | |
| .product__slides .product__photo--additional{ display: none; } | |
| .product__slides.slick-initialized .product__photo--additional{ display: block; } | |
| .product-form label{ | |
| @extend .title; | |
| margin-top: 2em; | |
| } | |
| .share{ | |
| padding-bottom: $gutter; | |
| } | |
| .share__link{ | |
| text-decoration: none; | |
| margin-left: $gutter/2; | |
| margin-right: $gutter/2; | |
| } | |
| .border-bottom-link { | |
| text-decoration: none; | |
| cursor: pointer; | |
| border-bottom: 1px solid $colorBorder; | |
| padding-bottom: 3px; | |
| &:hover{ | |
| border-bottom: 1px solid darken($colorBorder, 10%); | |
| } | |
| } | |
| .product-description--below{ | |
| margin-top: $gutter*2; | |
| } | |
| // video button | |
| .product__photo{ | |
| position: relative; | |
| } | |
| .product__play .icon{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-top: -50px; | |
| margin-left: -50px; | |
| } | |
| .product__play{ | |
| position: absolute; | |
| top:0; | |
| bottom:0; | |
| left:0; | |
| right:0; | |
| opacity: 1; | |
| @include transition(opacity 0.2s ease-out); | |
| &:hover{ | |
| opacity: 0.75; | |
| } | |
| } | |
| /*============================================================================ | |
| #Blogs and Comments | |
| ==============================================================================*/ | |
| .blog{ | |
| background-color: $colorBody; | |
| padding-bottom: $gutter*4; | |
| } | |
| .template-blog .main-content{ | |
| padding-bottom: 0; | |
| } | |
| .template-article .background-size-cover, | |
| .template-article .use_image{ | |
| z-index: -1; | |
| } | |
| .blog__link{ | |
| text-decoration: none; | |
| color: inherit; | |
| .blog__article--image .blog__article__title, | |
| .blog__article__title, | |
| .blog__article__text{ | |
| @include transition(transform .15s ease-out); | |
| } | |
| .blog__article__overlay { @include transition(transform 1.1s ease-out); } | |
| &:hover{ | |
| color: inherit; | |
| .blog__article__title{ color: darken($colorSplash, 20%); } | |
| .blog__article--image .blog__article__title{ | |
| -webkit-transform: translateY(-10px); | |
| -ms-transform: translateY(-10px); | |
| transform: translateY(-10px); | |
| } | |
| .blog__article__overlay{ | |
| @include transform(scale(1.05)); | |
| } | |
| .blog__article__text{ | |
| -webkit-transform: translateY(-2px); | |
| -ms-transform: translateY(-2px); | |
| transform: translateY(-2px); | |
| } | |
| .blog__article__title{ | |
| -webkit-transform: translateY(2px); | |
| -ms-transform: translateY(2px); | |
| transform: translateY(2px); | |
| } | |
| } | |
| } | |
| .blog__article{ | |
| border: 1px solid rgba(#000, 0.1); | |
| box-shadow: 1px 1px 7px rgba(#000, 0.1); | |
| border-radius: $radius; | |
| padding: $gutter; | |
| margin-bottom: $gutter; | |
| @include at-query ($max, $small) { | |
| padding-left: $gutter/2; | |
| padding-right: $gutter/2; | |
| } | |
| .btn--full{ | |
| margin-bottom: ($gutter + 5px) * -1; | |
| border-top-right-radius:0; | |
| border-top-left-radius:0; | |
| } | |
| .share{ | |
| padding-top: $gutter/2; | |
| padding-bottom: 0px | |
| } | |
| } | |
| .blog__article-header-image{ | |
| background-size: cover; | |
| background-position: center center; | |
| position: relative; | |
| z-index: 0; | |
| padding: $gutter*6 $gutter $gutter $gutter; | |
| margin-top: $gutter*-1; | |
| @extend .banner; | |
| color: #fff; | |
| @include at-query ($max, $small) { | |
| padding: $gutter*3 $gutter/2 $gutter/2 $gutter/2; | |
| } | |
| a{ color: #fff; } | |
| &:after { | |
| content: ""; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| z-index: -1; | |
| top: 0; | |
| left: 0; | |
| background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); | |
| background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); | |
| background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); | |
| } | |
| } | |
| .blog__article--over-image{ | |
| border: none; | |
| margin-top: -140px; | |
| background-color: #fff; | |
| z-index: 100; | |
| position: relative; | |
| @include at-query ($max, $medium) { | |
| margin-top: -100px; | |
| } | |
| } | |
| .blog__article--card{ | |
| margin-top: $gutter; | |
| margin-bottom: 0; | |
| box-shadow: none; | |
| border-radius: 0; | |
| } | |
| .blog .blog__article--card{ | |
| margin-top: 0; | |
| margin-bottom: $gutter; | |
| } | |
| .blog__article--image{ | |
| position: relative; | |
| overflow: hidden; | |
| border: none; | |
| } | |
| .blog__article__overlay{ | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 0; | |
| background-size: cover; | |
| background-position: center center; | |
| border: none; | |
| &:after { | |
| content: ""; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| z-index: -1; | |
| top: 0; | |
| left: 0; | |
| background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); | |
| background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); | |
| background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); | |
| } | |
| } | |
| .blog__article__content{ | |
| margin-top: $gutter/2; | |
| } | |
| .blog__article--card .blog__article__content{ | |
| margin: 0; | |
| min-height: 200px; | |
| } | |
| .blog__article--image .blog__article__content{ | |
| display: table; | |
| .blog__article__title{ | |
| position: relative; | |
| display: table-cell; | |
| vertical-align: bottom; | |
| color: white; | |
| a{ color: white; } | |
| } | |
| } | |
| .banner, | |
| .blog__article .btn--full{ | |
| margin-left: $gutter * -1; | |
| width: calc(100% + 60px); | |
| position: relative; | |
| max-width: none; | |
| @include at-query ($max, $small) { | |
| width: calc(100% + 30px); | |
| margin-left: $gutter / -2; | |
| } | |
| } | |
| .blog__article header{ | |
| text-align: center; | |
| margin-bottom: $gutter; | |
| .accent{ | |
| opacity: 0.6; | |
| } | |
| } | |
| .blog__article footer{ | |
| margin-bottom: $gutter; | |
| } | |
| .blog__sidebar{ | |
| position: relative; | |
| } | |
| .template-article .blog__sidebar{ | |
| position: relative; | |
| margin-top: 40px; | |
| } | |
| .blog__rss{ | |
| position:absolute; | |
| top:5px; | |
| right: 0; | |
| } | |
| .blog__comments{ | |
| text-decoration: none; | |
| em{ color: rgba($colorPrimary, 0.5); } | |
| &:hover{ | |
| text-decoration: underline; | |
| } | |
| } | |
| .blog__tag{ | |
| text-decoration: none; | |
| position: relative; | |
| color: $colorBody; | |
| background-color: $colorSplash; | |
| border-radius: $radius; | |
| padding: $gutter/6 $gutter/6 $gutter/6 $gutter/2; | |
| margin-bottom: $gutter/2; | |
| margin-bottom: 3px; | |
| display: inline-block; | |
| @include uppercase; | |
| &:before{ | |
| content: ''; | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 10px; | |
| position: absolute; | |
| top: 11px; | |
| left: 5px; | |
| background-color: $colorBody;; | |
| } | |
| } | |
| .comment { | |
| margin-bottom: $gutter; | |
| & + & { | |
| border-top: 1px solid rgba($colorBorder, 0.1); | |
| padding-top: $gutter; | |
| } | |
| } | |
| /*============================================================================ | |
| #Notes and Form Feedback | |
| ==============================================================================*/ | |
| .note, | |
| .errors { | |
| border-radius: $radius; | |
| padding: 6px 12px; | |
| margin-bottom: $gutter / 2; | |
| border: 1px solid transparent; | |
| font-size: 0.9em; | |
| text-align: left; | |
| ul, | |
| ol { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| li:last-child { | |
| margin-bottom: 0; | |
| } | |
| p { | |
| margin-bottom: 0; | |
| } | |
| } | |
| .note { | |
| border-color: $colorBorder; | |
| } | |
| .errors { | |
| ul { | |
| list-style: disc outside; | |
| margin-left: 20px; | |
| } | |
| } | |
| .form-success { | |
| color: $successGreen; | |
| background-color: $successGreenBg; | |
| border-color: $successGreen; | |
| a { | |
| color: $successGreen; | |
| text-decoration: underline; | |
| &:hover { | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| .form-error, | |
| .errors { | |
| color: $errorRed; | |
| background-color: $errorRedBg; | |
| border-color: $errorRed; | |
| a { | |
| color: $errorRed; | |
| text-decoration: underline; | |
| &:hover { | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Cart Page | |
| ==============================================================================*/ | |
| .cart__row { | |
| position: relative; | |
| margin-top: $gutter; | |
| padding-top: $gutter; | |
| border-top: 1px solid $colorBorder; | |
| &:first-child { | |
| margin-top: 0; | |
| } | |
| &:first-child { | |
| padding-top: 0; | |
| border-top: 0 none; | |
| } | |
| a{ | |
| text-decoration: none; | |
| } | |
| .js-qty { | |
| margin: 0; | |
| } | |
| } | |
| @include at-query ($min, $large) { | |
| .cart__row--table-large { | |
| display: table; | |
| table-layout: fixed; | |
| width: 100%; | |
| .grid__item { | |
| display: table-cell; | |
| vertical-align: middle; | |
| float: none; | |
| } | |
| } | |
| } | |
| .cart__image { | |
| display: block; | |
| img { | |
| display: block; | |
| } | |
| } | |
| .cart__subtotal { | |
| margin: 0 0 0 ($gutter / 3); | |
| display: inline; | |
| } | |
| .cart__mini-labels { | |
| display: block; | |
| margin: ($gutter / 3) 0; | |
| font-size: em(12px); | |
| @include at-query ($min, $large) { | |
| display: none; | |
| } | |
| } | |
| .cart__remove { | |
| display: block; | |
| } | |
| .cart__footer{ | |
| text-align: right; | |
| } | |
| .cart__instructions__label{ | |
| text-align: left; | |
| } | |
| .hidden-count{ | |
| display: none; | |
| } | |
| .additional-checkout-buttons { | |
| margin: 20px 0; | |
| padding: 8px; | |
| background-color: darken($colorBody, 2%); | |
| border: 1px solid darken($colorBody, 5%); | |
| text-align: right; | |
| & > *:not(script) { | |
| padding: 12px 0 0 5px; | |
| vertical-align: top; | |
| line-height: 1; | |
| &:first-child, | |
| &:empty { | |
| padding-left: 0px; | |
| } | |
| } | |
| } | |
| .ajaxcart .additional-checkout-buttons{ | |
| margin: 0; | |
| padding: 0; | |
| background-color: darken($colorSplash, 20%); | |
| border: none; | |
| text-align: center; | |
| min-height: 0; | |
| & > *:not(script) { | |
| margin-top: 8px; | |
| margin-bottom: 8px; | |
| } | |
| } | |
| /*============================================================================ | |
| #Quantity Selectors | |
| ==============================================================================*/ | |
| .ajaxcart--hide{ | |
| opacity: 0; | |
| } | |
| .js-qty { | |
| position: relative; | |
| margin-bottom: 1em; | |
| max-width: 103px; | |
| min-width: 75px; | |
| overflow: visible; | |
| @include backface(hidden); | |
| input[type="text"] { | |
| display: block; | |
| background: none; | |
| text-align: center; | |
| width: 100%; | |
| padding: 5px 30px; | |
| margin: 0; | |
| } | |
| } | |
| .product-single .js-qty{ | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .js-qty__adjust { | |
| cursor: pointer; | |
| position: absolute; | |
| display: block; | |
| padding: 0 12px; | |
| top: 0px; | |
| bottom: 0px; | |
| border: 0 none; | |
| background: none; | |
| text-align: center; | |
| overflow: hidden; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| @include transition(all 0.2s ease-out); | |
| &:hover, | |
| &:focus { | |
| color: $colorSplash; | |
| outline: none; | |
| } | |
| &:active { | |
| color: darken($colorSplash, 20%); | |
| outline: none; | |
| } | |
| } | |
| .update-cart:focus { | |
| outline: none; | |
| } | |
| .js-qty__adjust--plus { | |
| right: 0; | |
| } | |
| .js-qty__adjust--minus { | |
| left: 0; | |
| } | |
| /*============================================================================ | |
| #Quantity Selectors in the Ajax Cart | |
| ==============================================================================*/ | |
| .ajaxcart__qty, | |
| #your-shopping-cart .js-qty{ | |
| @extend .js-qty; | |
| display: inline-block; | |
| margin: 0; | |
| .is-loading & { | |
| opacity: 0.5; | |
| @include transition(none); | |
| } | |
| } | |
| .ajaxcart__qty-adjust { | |
| @extend .js-qty__adjust; | |
| } | |
| .ajaxcart__qty--plus { | |
| @extend .js-qty__adjust--plus; | |
| } | |
| .ajaxcart__qty--minus { | |
| @extend .js-qty__adjust--minus; | |
| } | |
| .ajaxcart__errors{ | |
| margin-top: $gutter/2; | |
| } | |
| /*============================================================================ | |
| #Charge Rabbit | |
| ==============================================================================*/ | |
| .charge_rabbit, .sky-pilot{ | |
| @extend .wrapper; | |
| @extend .page-margin; | |
| } | |
| .sky-pilot-access-denied{ | |
| text-align: center; | |
| a{ | |
| @extend .btn; | |
| } | |
| h5{ | |
| @extend h3; | |
| @extend .title; | |
| } | |
| } | |
| .charge_rabbit{ | |
| .login_or_signup{ | |
| text-align: center; | |
| a#login_link, a#signup_link{ | |
| @extend .btn; | |
| display: block; | |
| margin: 15px auto; | |
| max-width: 300px; | |
| } | |
| } | |
| @include at-query ($min, $medium) { | |
| .address_info, .card_info{ | |
| width: 50%; | |
| float: left; | |
| } | |
| } | |
| @include at-query ($max, $medium) { | |
| .address_info{ | |
| margin-top: 20px; | |
| } | |
| } | |
| a.update-card-link, a.update-address-link{ | |
| @extend .btn; | |
| margin-top: 10px; | |
| } | |
| dl{ | |
| dt{ | |
| font-weight: bold; | |
| width: 30%; | |
| } | |
| dt, dd{ | |
| float: left; | |
| -webkit-margin-start: 0; | |
| } | |
| dd{ | |
| width: 70%; | |
| } | |
| } | |
| .subscription_actions{ | |
| clear: both; | |
| padding-top: 20px; | |
| } | |
| .continue_shopping a{ | |
| @extend .btn; | |
| } | |
| .cancel-subscription-wrapper{ | |
| text-align: center; | |
| a{ | |
| @extend .btn; | |
| display: block; | |
| margin: 15px auto; | |
| max-width: 300px; | |
| } | |
| } | |
| a.cancel-subscription-link{ | |
| @extend .btn; | |
| background: $errorRed; | |
| } | |
| } | |
| /*============================================================================ | |
| #Password Page | |
| ==============================================================================*/ | |
| .template-password { | |
| height: 100vh; | |
| text-align: center; | |
| } | |
| .password-section{ | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .password__wrapper { | |
| display: table; | |
| height: 100%; | |
| width: 100%; | |
| color: $colorTextBody; | |
| background-color: $colorSplash; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center center; | |
| background-color: $colorTextBody; | |
| .password__footer__inner { | |
| color: #fff; | |
| } | |
| a { | |
| color: inherit; | |
| } | |
| } | |
| .password__main { | |
| display: table-row; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0 auto; | |
| } | |
| .password__main__inner { | |
| display: table-cell; | |
| vertical-align: middle; | |
| padding: ( $gutter / 2 ) $gutter; | |
| @include at-query($max, $small) { | |
| padding: $gutter/3 $gutter/3; | |
| } | |
| @include at-query($min, $small) { | |
| padding: $gutter/3 $gutter; | |
| } | |
| } | |
| .password__box{ | |
| background-color: $colorBody; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| @include at-query($max, $small) { | |
| padding: $gutter $gutter; | |
| } | |
| @include at-query($min, $small) { | |
| padding: $gutter 0; | |
| } | |
| } | |
| .template-password .newsletter-form{ | |
| border: 1px solid rgba($colorBorder, 0.5); | |
| } | |
| .storefront-password-form{ | |
| margin-top: $gutter; | |
| } | |
| .password__hero { | |
| @include title(); | |
| font-size: em(42px); | |
| line-height: 1.15; | |
| letter-spacing: 0; | |
| text-rendering: optimizeLegibility; | |
| padding-bottom: $gutter; | |
| padding-top: $gutter; | |
| @include at-query($min, $postSmall) { | |
| font-size: em(50px); | |
| } | |
| @include at-query($min, $large) { | |
| font-size: em(55px); | |
| } | |
| .logo { | |
| max-width: 100%; | |
| max-height: 200px; | |
| } | |
| } | |
| .password__message { | |
| font-size: 120%; | |
| img { | |
| max-width: 100%; | |
| } | |
| } | |
| .password__hero, | |
| .password__message, | |
| .password__login-form, | |
| .password__signup-form { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .password__login-form { | |
| text-align: center; | |
| padding: $gutter*2 $gutter; | |
| } | |
| .password__login-form, | |
| .password__box{ | |
| -moz-box-shadow: 0 0 10px rgba(#000, 0.3); | |
| -webkit-box-shadow: 0 0 10px rgba(#000, 0.3); | |
| box-shadow: 0 0 10px rgba(#000, 0.3); | |
| border-radius: 4px; | |
| } | |
| .password__login-form, | |
| .password__signup-form { | |
| background-color: $colorBody; | |
| @include at-query($min, $small) { | |
| padding-left: $gutter; | |
| padding-right: $gutter; | |
| } | |
| .input-group { | |
| width: 100%; | |
| } | |
| .errors ul { | |
| list-style-type: none; | |
| margin-left: 0; | |
| } | |
| } | |
| .password__signup-form { | |
| padding-top: $gutter; | |
| } | |
| .password__signup-form__heading { | |
| margin-bottom: 0.8em; | |
| } | |
| .password__social-sharing { | |
| margin-top: $gutter; | |
| } | |
| .password__social-sharing__heading { | |
| margin-bottom: 0; | |
| } | |
| .admin-login { | |
| margin-top: $gutter / 2; | |
| margin-bottom: 0; | |
| a{ | |
| text-decoration: none; | |
| } | |
| } | |
| .admin-login { | |
| font-size: 95%; | |
| } | |
| .password__footer { | |
| display: table-row; | |
| height: 1px; | |
| } | |
| .password__footer__inner { | |
| display: table-cell; | |
| vertical-align: bottom; | |
| padding: $gutter; | |
| line-height: 1.5 * $baseFontSize; | |
| font-size: 95%; | |
| color: $colorFooterText; | |
| a{ | |
| text-decoration: none; | |
| margin: 0 $gutter / 2; | |
| @include at-query($max, $medium) { | |
| display: block; | |
| margin-top: $gutter/2; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| #Slick Slider | |
| ==============================================================================*/ | |
| .slick-slider { | |
| position: relative; | |
| display: block; | |
| box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| -ms-touch-action: pan-y; | |
| touch-action: pan-y; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .slick-list { | |
| position: relative; | |
| overflow: hidden; | |
| display: block; | |
| margin: 0; | |
| padding: 0; | |
| &:focus { | |
| outline: none; | |
| } | |
| &.dragging { | |
| cursor: pointer; | |
| cursor: hand; | |
| } | |
| } | |
| .slick-slider .slick-track, | |
| .slick-slider .slick-list { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -ms-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slick-track { | |
| position: relative; | |
| left: 0; | |
| top: 0; | |
| display: block; | |
| &:before, | |
| &:after { | |
| content: ""; | |
| display: table; | |
| } | |
| &:after { | |
| clear: both; | |
| } | |
| .slick-loading & { | |
| visibility: hidden; | |
| } | |
| } | |
| .slick-slide { | |
| float: left; | |
| height: 100%; | |
| min-height: 1px; | |
| display: none; | |
| [dir="rtl"] & { | |
| float: right; | |
| } | |
| img { | |
| display: block; | |
| } | |
| &.slick-loading img { | |
| display: none; | |
| } | |
| &.dragging img { | |
| pointer-events: none; | |
| } | |
| .slick-initialized & { | |
| display: block; | |
| } | |
| .slick-loading & { | |
| visibility: hidden; | |
| } | |
| .slick-vertical & { | |
| display: block; | |
| height: auto; | |
| border: 1px solid transparent; | |
| } | |
| } | |
| /*============================================================================ | |
| #Slick Theme | |
| ==============================================================================*/ | |
| $slick-dot-color: $colorBorder; | |
| $slick-dot-color-active: $slick-dot-color ; | |
| $slick-dot-character: "•" !default; | |
| $slick-dot-size: 30px !default; | |
| $slick-opacity-default: 0.75 !default; | |
| $slick-opacity-on-hover: 1 !default; | |
| $slick-opacity-not-active: 0.75 !default; | |
| /* Slider */ | |
| .slick-list { | |
| .slick-loading & { | |
| background: {{ settings.product_background_color }}; | |
| } | |
| } | |
| /* Arrows */ | |
| .slick-prev, | |
| .slick-next { | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -124px; | |
| z-index: 500; | |
| cursor: pointer; | |
| background: transparent; | |
| color: transparent; | |
| border: none; | |
| outline: none; | |
| opacity: $slick-opacity-not-active; | |
| -webkit-text-size-adjust: none; | |
| font-size: 1px; | |
| letter-spacing: -1px; | |
| &:before { | |
| font-size: 46px; | |
| font-size: 3rem; | |
| letter-spacing: normal; | |
| color: {{ settings.product_slideshow_arrows }}; | |
| } | |
| @include transition(opacity .2s ease-out); | |
| &:hover{ | |
| outline: none; | |
| opacity: $slick-opacity-on-hover; | |
| } | |
| &.slick-disabled:before { | |
| opacity: $slick-opacity-not-active; | |
| } | |
| } | |
| .slick-next { | |
| right: 0; | |
| padding: 100px 0 100px 20px; | |
| @extend .icon-arrow-right; | |
| @extend .icon; | |
| } | |
| .slick-prev { | |
| left: 0; | |
| padding: 100px 20px 100px 0; | |
| @extend .icon-arrow-left; | |
| @extend .icon; | |
| } | |
| /* Dots */ | |
| .slick-slider { | |
| margin-bottom: 5px; | |
| } | |
| .product__thumbs--square{ | |
| .slick-dots { | |
| list-style: none; | |
| display: block; | |
| text-align: center; | |
| padding: 0; | |
| margin: 0; | |
| width: 100%; | |
| li { | |
| position: relative; | |
| display: inline-block; | |
| height: 40px; | |
| width: 40px; | |
| margin: 10px 5px; | |
| padding: 0; | |
| cursor: pointer; | |
| } | |
| } | |
| } | |
| .slick-dots { | |
| li { | |
| button { | |
| border: 0; | |
| background: transparent; | |
| display: block; | |
| height: 20px; | |
| width: 20px; | |
| outline: none; | |
| line-height: 0px; | |
| font-size: 0px; | |
| color: transparent; | |
| padding: 5px; | |
| cursor: pointer; | |
| &:hover, &:focus { | |
| outline: none; | |
| &:before { | |
| opacity: $slick-opacity-on-hover; | |
| } | |
| } | |
| &:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| content: $slick-dot-character; | |
| width: 20px; | |
| height: 20px; | |
| font-size: $slick-dot-size; | |
| line-height: 20px; | |
| text-align: center; | |
| color: $slick-dot-color; | |
| opacity: $slick-opacity-not-active; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| } | |
| &.slick-active button:before { | |
| color: $slick-dot-color-active; | |
| opacity: $slick-opacity-on-hover; | |
| } | |
| } | |
| } | |
| /*============================================================================ | |
| # Home slideshow | |
| ==============================================================================*/ | |
| .slideshow__slide{ | |
| position: relative; | |
| } | |
| .slideshow__slide img { | |
| max-width: 100%; | |
| } | |
| .use_screen_full .slideshow__slide{ height: 100vh; } | |
| .use_screen_three_quarters .slideshow__slide{ height: 75vh; } | |
| .use_screen_two_thirds .slideshow__slide{ height: 66vh; } | |
| .use_screen_one_half .slideshow__slide{ height: 50vh; } | |
| .use_screen_one_third .slideshow__slide{ height: 33vh; } | |
| .use_screen_one_fifth .slideshow__slide{ height: 20vh; } | |
| .background-size-cover--slide{ | |
| display: block; | |
| background-size: cover; | |
| background-position: center center; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .button-image-slide{ | |
| display: inline-block; | |
| } | |
| .homepage--white.slick-arrow:before{ color: #ffffff; } | |
| .homepage--light.slick-arrow:before{ color: $colorHomeLight; } | |
| .homepage--splash.slick-arrow:before{ color: $colorSplash; } | |
| .homepage--dark.slick-arrow:before{ color: $colorHomeDark; } | |
| .slideshow__slide .content--centered{ | |
| padding-left: 40px; | |
| padding-right: 40px; | |
| } | |
| /*============================================================================ | |
| #Magnific Popup CSS (used on password page) | |
| ==============================================================================*/ | |
| .mfp-bg { | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1042; | |
| overflow: hidden; | |
| position: fixed; | |
| background: #0b0b0b; | |
| opacity: 0.8; | |
| filter: alpha(opacity=80); } | |
| .mfp-wrap { | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1043; | |
| position: fixed; | |
| outline: none !important; | |
| -webkit-backface-visibility: hidden; } | |
| .mfp-container { | |
| text-align: center; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| left: 0; | |
| top: 0; | |
| padding: 0 8px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| .mfp-container:before { | |
| content: ''; | |
| display: inline-block; | |
| height: 100%; | |
| vertical-align: middle; } | |
| .mfp-align-top .mfp-container:before { | |
| display: none; } | |
| .mfp-content { | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin: 0 auto; | |
| text-align: left; | |
| z-index: 1045; } | |
| .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { | |
| width: 100%; | |
| cursor: auto; } | |
| .mfp-ajax-cur { | |
| cursor: progress; } | |
| .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { | |
| cursor: -moz-zoom-out; | |
| cursor: -webkit-zoom-out; | |
| cursor: zoom-out; } | |
| .mfp-zoom, | |
| .product__photo img[data-mfp-src] { | |
| 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; } | |
| .mfp-loading.mfp-figure { | |
| display: none; } | |
| .mfp-hide { | |
| display: none !important; } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .mfp-preloader { | |
| color: #CCC; | |
| position: absolute; | |
| top: 50%; | |
| width: auto; | |
| text-align: center; | |
| margin-top: -0.8em; | |
| left: 8px; | |
| right: 8px; | |
| z-index: 1044; | |
| &:after{ | |
| content: ''; | |
| display: inline-block; | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| border: .25rem solid rgba(#fff, 0.2); | |
| border-top-color: #fff; | |
| animation: spin 1s infinite linear; | |
| } | |
| } | |
| .mfp-preloader a { | |
| color: #CCC; } | |
| .mfp-preloader a:hover { | |
| color: #FFF; } | |
| .mfp-s-ready .mfp-preloader { | |
| display: none; } | |
| .mfp-s-error .mfp-content { | |
| display: none; } | |
| button.mfp-close, button.mfp-arrow { | |
| overflow: visible; | |
| cursor: pointer; | |
| background: transparent; | |
| border: 0; | |
| -webkit-appearance: none; | |
| display: block; | |
| outline: none; | |
| padding: 0; | |
| z-index: 1046; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; } | |
| button::-moz-focus-inner { | |
| padding: 0; | |
| border: 0; } | |
| .mfp-close { | |
| width: 44px; | |
| height: 44px; | |
| line-height: 44px; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| text-decoration: none; | |
| text-align: center; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| padding: 0 0 18px 10px; | |
| color: #FFF; | |
| font-style: normal; | |
| font-size: 28px; | |
| font-family: Arial, Baskerville, monospace; } | |
| .mfp-close:hover, .mfp-close:focus { | |
| opacity: 1; | |
| filter: alpha(opacity=100); } | |
| .mfp-close:active { | |
| top: 1px; } | |
| .mfp-close-btn-in .mfp-close { | |
| color: #333; } | |
| .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { | |
| color: #FFF; | |
| right: -6px; | |
| text-align: right; | |
| padding-right: 6px; | |
| width: 100%; } | |
| .mfp-counter { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| color: #CCC; | |
| font-size: 12px; | |
| line-height: 18px; | |
| white-space: nowrap; } | |
| .mfp-arrow { | |
| position: absolute; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| margin: 0; | |
| top: 50%; | |
| margin-top: -55px; | |
| padding: 0; | |
| width: 90px; | |
| height: 110px; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } | |
| .mfp-arrow:active { | |
| margin-top: -54px; } | |
| .mfp-arrow:hover, .mfp-arrow:focus { | |
| opacity: 1; | |
| filter: alpha(opacity=100); } | |
| .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .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; } | |
| .mfp-arrow:after, .mfp-arrow .mfp-a { | |
| border-top-width: 13px; | |
| border-bottom-width: 13px; | |
| top: 8px; } | |
| .mfp-arrow:before, .mfp-arrow .mfp-b { | |
| border-top-width: 21px; | |
| border-bottom-width: 21px; | |
| opacity: 0.7; } | |
| .mfp-arrow-left { | |
| left: 0; } | |
| .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { | |
| border-right: 17px solid #FFF; | |
| margin-left: 31px; } | |
| .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { | |
| margin-left: 25px; | |
| border-right: 27px solid #3F3F3F; } | |
| .mfp-arrow-right { | |
| right: 0; } | |
| .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { | |
| border-left: 17px solid #FFF; | |
| margin-left: 39px; } | |
| .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { | |
| border-left: 27px solid #3F3F3F; } | |
| .mfp-iframe-holder { | |
| padding-top: 40px; | |
| padding-bottom: 40px; } | |
| .mfp-iframe-holder .mfp-content { | |
| line-height: 0; | |
| width: 100%; | |
| max-width: 900px; } | |
| .mfp-iframe-holder .mfp-close { | |
| top: -40px; } | |
| .mfp-iframe-scaler { | |
| width: 100%; | |
| height: 0; | |
| overflow: hidden; | |
| padding-top: 56.25%; } | |
| .mfp-iframe-scaler iframe { | |
| position: absolute; | |
| display: block; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |
| background: #000; } | |
| /* 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: 40px 0 40px; | |
| margin: 0 auto; } | |
| /* The shadow behind the image */ | |
| .mfp-figure { | |
| line-height: 0; } | |
| .mfp-figure:after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 40px; | |
| bottom: 40px; | |
| display: block; | |
| right: 0; | |
| width: auto; | |
| height: auto; | |
| z-index: -1; | |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |
| background: #444; } | |
| .mfp-figure small { | |
| color: #BDBDBD; | |
| display: block; | |
| font-size: 12px; | |
| line-height: 14px; } | |
| .mfp-figure figure { | |
| margin: 0; } | |
| .mfp-bottom-bar { | |
| margin-top: -36px; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| cursor: auto; } | |
| .mfp-title { | |
| text-align: left; | |
| line-height: 18px; | |
| color: #F3F3F3; | |
| word-wrap: break-word; | |
| padding-right: 36px; } | |
| .mfp-image-holder .mfp-content { | |
| max-width: 100%; } | |
| .mfp-gallery .mfp-image-holder .mfp-figure { | |
| cursor: pointer; } | |
| @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; } | |
| .mfp-img-mobile img.mfp-img { | |
| padding: 0; } | |
| .mfp-img-mobile .mfp-figure:after { | |
| top: 0; | |
| bottom: 0; } | |
| .mfp-img-mobile .mfp-figure small { | |
| display: inline; | |
| margin-left: 5px; } | |
| .mfp-img-mobile .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; } | |
| .mfp-img-mobile .mfp-bottom-bar:empty { | |
| padding: 0; } | |
| .mfp-img-mobile .mfp-counter { | |
| right: 5px; | |
| top: 3px; } | |
| .mfp-img-mobile .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; } | |
| } | |
| @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: 6px; | |
| padding-right: 6px; } | |
| } | |
| .mfp-ie7 .mfp-img { | |
| padding: 0; } | |
| .mfp-ie7 .mfp-bottom-bar { | |
| width: 600px; | |
| left: 50%; | |
| margin-left: -300px; | |
| margin-top: 5px; | |
| padding-bottom: 5px; } | |
| .mfp-ie7 .mfp-container { | |
| padding: 0; } | |
| .mfp-ie7 .mfp-content { | |
| padding-top: 44px; } | |
| .mfp-ie7 .mfp-close { | |
| top: 0; | |
| right: 0; | |
| padding-top: 0; } | |
| button.mfp-close { | |
| margin: 30px; | |
| font-size: em(40px); | |
| font-weight: 300px; | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| color: #fff; | |
| } | |
| /*============ Theme Specific MFP ==================*/ | |
| .mfp-bg { background-color: rgba(0,0,0,0.75); } | |
| .template-password .mfp-bg { background-color: $colorSplash; } | |
| /* Wider images for zoom */ | |
| .mfp-figure figure { | |
| overflow-y: scroll; | |
| } | |
| img.mfp-img{ | |
| max-height: none !important; | |
| } | |
| button.mfp-close { | |
| margin: 0px; | |
| } | |
| /* Size chart popup for product page */ | |
| .mfp-content .product-modal { | |
| position: relative; | |
| background: #FFF; | |
| padding: $gutter*1.5 $gutter; | |
| width: auto; | |
| margin: 20px auto; | |
| max-width: $siteWidth; | |
| @include at-query ($max, $small) { | |
| padding: $gutter*1.5 $gutter/2; | |
| } | |
| } | |
| .mfp-bg { | |
| &.mfp-fade { | |
| -webkit-backface-visibility: hidden; | |
| opacity: 0; | |
| @include transition(all 0.3s ease-out); | |
| &.mfp-ready { | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| } | |
| &.mfp-removing { | |
| @include transition(all 0.1s ease-out); | |
| opacity: 0; | |
| filter: alpha(opacity=0); | |
| } | |
| } | |
| } | |
| .mfp-fade { | |
| &.mfp-wrap { | |
| .mfp-content { | |
| opacity: 0; | |
| @include transition(all 0.3s ease-out); | |
| } | |
| &.mfp-ready { | |
| .mfp-content { | |
| opacity: 1; | |
| } | |
| } | |
| &.mfp-removing { | |
| @include transition(all 0.1s ease-out); | |
| .mfp-content { | |
| opacity: 0; | |
| } | |
| button { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| } | |
| /*============ Add any custom styles below this line ==================*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment