/* ------------------------------------------------------------------------------- storefront.scss: - Imports _core.scss, which contains all of the core styles for the site - Contains other individual components that are needed by the page from the site or from Rich_CoreUI (e.g., layouts, modules, helpers, etc...) ---------------------------------------------------------------------------- */ /* ==================================================================================== site.scss: - Imports for all: Rich_UI core, Base, Utilities, States, Modules and Layouts - This is typicall used for documentation of the Rich_UI Styles ================================================================================= */ /* ------------------------------------------------------------------------ core.scss: - Core Imports: Base, States, Utilities, and Shame Note: The purpose of this partial is to include only the core styles that all of the sites require. For any layout or module that is required by an individual site, the site is responsible for importing those in at the site level. ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ base.scss: - Define the styles for the HTML elements e.g., h2, a, table, li, etc... --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ index.scss: - Imports for all Rich_CoreUI's utilities --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ /* ----------------------------------- font.scss: - @font-face mixin usage --------------------------------- */ /* ---------------------------------------------------------- function.scss: - e.g., ems to rems conversion, etc... -------------------------------------------------------- */ /* ---------------------------------------------------------- mixins.scss: - Contains global mixins e.g., Media queries, CSS3, etc... -------------------------------------------------------- */ /** Defines the configuration of a style utilizing a background image within a sprite sheet. $spritemap-width : px width of sprite sheet. must be defined before this file is imported. $spritemap-height : px height of sprite sheet. must be defined before this file is imported. $left : px left coordinate of the sprite $top : px top coordinate of the sprite $width : px the width of the sprite $height : px the height of the sprite $scale : int the scale of the sprite, default 1 */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ /* ================== vert-align - Vertically align an element inside its container */ /* =================== overlay-link - Make an overlay-link for a container using its inline child element - NOTES: Use this on parent container with "relative" positioning */ /* =================== inline-background - Make an image background for a container using its inline child element - NOTES: Use this on parent container with "relative" positioning */ /* ---------------------------------------------------------- helpers.scss: - Styles that add functionality that normally doesn't fit into its own component - e.g., hide-desktop, hide-tablet, visually-hidden , etc... -------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ /* .unavailable{ &:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../../images/slash.png); background-size: 100% 100%; } } */ /** Redefine variables for COL */ /* ---------------------------------------------------------- states.scss: - Global states to be used by all sites -------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ @media (max-width: 767px) { .is-hidden-mobile { display: none !important; visibility: hidden; } } @media (min-width: 768px) and (max-width: 1023px) { .is-hidden-tablet { display: none !important; visibility: hidden; } } @media (min-width: 1024px) { .is-hidden-desktop { display: none !important; visibility: hidden; } } @media (min-width: 1332px) { .is-hidden-lg-desktop { display: none !important; visibility: hidden; } } /* ---------------------------------------------------------- touch.scss: - Touch specific styles -------------------------------------------------------- */ /* ---------------------------------------------------------- touch.scss: - Print specific styles -------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables for Sorel --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ /* COLOR PALETTE */ /* TYPOGRAPHY */ /* TEXT */ /* LETTER SPACING */ /* COMPONENTS */ /* ------------------------------------------------------------------------ fonts.scss: - @font-face mixins for Columbia (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables for Sorel --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ /* COLOR PALETTE */ /* TYPOGRAPHY */ /* TEXT */ /* LETTER SPACING */ /* COMPONENTS */ @font-face { font-family: "LibreBaskerville"; font-weight: normal; font-style: normal; src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Regular.eot"); src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Regular.eot?#iefix") format("embedded-opentype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Regular.woff") format("woff"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Regular.ttf") format("truetype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Regular.svg#LibreBaskerville") format("svg"); } @font-face { font-family: "LibreBaskerville"; font-weight: normal; font-style: italic; src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Italic.eot"); src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Italic.eot?#iefix") format("embedded-opentype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Italic.woff") format("woff"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Italic.ttf") format("truetype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Italic.svg#LibreBaskerville") format("svg"); } @font-face { font-family: "LibreBaskerville"; font-weight: bold; font-style: normal; src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Bold.eot"); src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Bold.eot?#iefix") format("embedded-opentype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Bold.woff") format("woff"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Bold.ttf") format("truetype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville-Bold.svg#LibreBaskerville") format("svg"); } @font-face { font-family: "TexGyreHeros"; font-weight: normal; font-style: normal; src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-regular.eot"); src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-regular.eot?#iefix") format("embedded-opentype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-regular.woff") format("woff"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-regular.ttf") format("truetype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-regular.svg#TexGyreHeros") format("svg"); } @font-face { font-family: "TexGyreHeros"; font-weight: normal; font-style: italic; src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-italic.eot"); src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-italic.eot?#iefix") format("embedded-opentype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-italic.woff") format("woff"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-italic.ttf") format("truetype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-italic.svg#TexGyreHeros") format("svg"); } @font-face { font-family: "TexGyreHeros"; font-weight: bold; font-style: normal; src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-bold.eot"); src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-bold.eot?#iefix") format("embedded-opentype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-bold.woff") format("woff"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-bold.ttf") format("truetype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/texgyreheros/texgyreheros-bold.svg#TexGyreHeros") format("svg"); } @font-face { font-family: "overpass"; font-weight: normal; font-style: normal; src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/overpass/overpass-regular.eot"); src: url("//d2ir14y3uwqyyi.cloudfront.net/fonts/overpass/overpass-regular.eot?#iefix") format("embedded-opentype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/overpass/overpass-regular.woff") format("woff"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/overpass/overpass-regular.ttf") format("truetype"), url("//d2ir14y3uwqyyi.cloudfront.net/fonts/overpass/overpass-regular.svg#overpass") format("svg"); } /* ------------------------------------------------------------------------ shame.scss: - Hack for things created in the SASS framework only Note: ---------------------------------------------------------------------- */ /* This is due to how SOREL Category Refinement Group is designed where this wrapper has to be an element inside of the group */ .cwrapper-expandBanner, #category-banner { clear: left; } @media (max-width: 1023px) { .refinement-container .cwrapper-expandBanner { display: none; } } #home-main .ctaButton { text-decoration: none; } /* ============= LAYOUT IMPORTS - Importing layouts from Rich_CoreUI or from this site */ /* ============= MODULE IMPORTS - Importing modules from Rich_CoreUI or from this site */ /* ------------------------------------------------------------------------------ heading.scss: - Heading modules which include (heading, heading-hero, and heading-subhero) ---------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables for Sorel --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ /* COLOR PALETTE */ /* TYPOGRAPHY */ /* TEXT */ /* LETTER SPACING */ /* COMPONENTS */ .heading { font-family: "//d2ir14y3uwqyyi.cloudfront.net/fonts/baskerville/LibreBaskerville"; color: #ffffff; } .heading-heroMain { font-size: 36px; text-transform: uppercase; letter-spacing: 15px; } .heading-heroSub { font-size: 17px; text-transform: uppercase; letter-spacing: 5px; } /* ------------------------------------------------------------------------ ctaButton.scss: - CTA buttons --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables for Sorel --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ global.scss: - Global variables shared by all sites (e.g., media queries, etc...) ---------------------------------------------------------------------- */ /* COLOR PALETTE */ /* MEDIA QUERIES */ /* Z-INDEXES */ /* TYPOGRAPHY */ /* TEXT */ /* COLOR PALETTE */ /* TYPOGRAPHY */ /* TEXT */ /* LETTER SPACING */ /* COMPONENTS */ /* A mixing for creating a ctaButton Called inside of a .ctaButton class E.g., .ctaButton { @include ctaButton(); ...} */ /* A mixin for generating a skin for an ctaButton Must be called inside of a skin class inside of the .ctaButton class E.g. .ctaButton { @include ctaButton(); &.skin-name{ @include ctaButton-skin(...)} */ /* A mixin for adding hover capability to a ctaButton. This mixin is mostly called by ctaButton-skin but can also be called independently to add hover to default ctaButton */ .ctaButton { border: none; border-radius: 0; text-decoration: none; cursor: pointer; text-align: center; display: inline-block; font-size: 12px; height: 36px; width: 150px; padding: 8px 15px; color: #fff; font-weight: bold; background-color: #000; text-transform: uppercase; padding: 10px 30px; font-family: "LibreBaskerville"; letter-spacing: 5px; } .ctaButton-flex { width: auto; height: auto; } .ctaButton-short { width: 100px; } .ctaButton-long { width: 220px; } .ctaButton-tall { width: 120px; height: 44px; } .ctaButton.skin-originalDark { color: #fff; background-color: #000; border: 1px solid #fff; } .ctaButton.skin-originalDark.is-hoverEnabled:hover { color: #000; background-color: #fff; border: 1px solid #fff; } .ctaButton.skin-formDark { color: #fff; background-color: #000; border: 1px solid #fff; font-family: "TexGyreHeros"; letter-spacing: 2px; } .ctaButton.skin-formDark.is-hoverEnabled:hover { color: #000; background-color: #fff; border: 1px solid #fff; } .ctaButton-primary { background-color: #000; color: #ffffff; padding: 12px 15px; height: 44px; width: auto; } .ctaButton-primary:hover { background-color: #868686; color: #ffffff; }