Created
February 1, 2016 17:22
-
-
Save BryanBarrera/a885584a34f0d7c2b0a1 to your computer and use it in GitHub Desktop.
Hubspot Boilerplate CSS
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
/* @import url('http://example.com/example_style.css'); */ | |
/** | |
* CSS @imports must be at the top of the file. | |
* Add them above this section. | |
*/ | |
/* ========================================================================== | |
HS COS Boilerplate v1.5.0 | |
Reference: http://designers.hubspot.com/docs/tools/boilerplate-css | |
========================================================================== */ | |
{% include "custom/page/Company_Theme/CompanyModules.css" %} | |
/* These includes are optional, but helpful. */ | |
{% include "hubspot/styles/patches/recommended.css" %} | |
/* ========================================================================== | |
Index: | |
1. BASE STYLES | |
- Variables | |
- Macros | |
- Base | |
- Typography | |
2. COS STRUCTURE | |
- Structure | |
- Header | |
- Content | |
- Footer | |
3. MAIN NAVIGATION | |
- Custom Menu Primary | |
- Mobile Menu | |
4. TEMPLATE MODULE CLASSES | |
- Common Template Classes | |
- Site Pages | |
- Landing Pages | |
- System Pages | |
5. COS COMPONENTS | |
- Blog | |
- Forms | |
- Buttons | |
6. MISCELLANOUS | |
7. MOBILE MEDIA QUERIES | |
========================================================================== */ | |
/* ========================================================================== | |
1. BASE STYLES | |
========================================================================== */ | |
/* ========================================================================== | |
Variables | |
========================================================================== */ | |
/** | |
* Find the most consistently used font styles, colors, and container widths | |
* for your site and assign them to the jinja variables below for easy use | |
* and reference. | |
* | |
* Apply the variable as shown below. Ignore the jingja comment tags. | |
* | |
* {# property: {{ variableName }}; #} | |
*/ | |
/* Colors */ | |
{% set baseColor = "#333" %} /* {# Dark Gray | Used on 'body' in 'Base' | Ex. "color: {{ baseColor }};" #} */ | |
{% set linkColor = "gray" %} /* {# Gray | Used on global anchors in 'Base' | Ex. "color: {{ linkColor }};" #} */ | |
{% set linkHover = "#000" %} /* {# Black | Used on global anchors in 'Base' | Ex. "color: {{ linkHover }};" #} */ | |
{% set accentColor1 = "#666" %} /* {# Medium Gray | Ex. "color: {{ accentColor1 }};" #} */ | |
{% set accentColor2 = "#ccc" %} /* {# Light Gray | Ex. "color: {{ accentColor2 }};" #} */ | |
{% set accentColor3 = "#ddd" %} /* {# Lightest Gray | Ex. "color: {{ accentColor3 }};" #} */ | |
/* Typography */ | |
{% set baseFontFamily = "Arial, Sans-Serif" %} /* {# Used on 'body' in 'Base' | Ex. "font-family: {{ baseFontFamily }};" #} */ | |
{% set baseFontSize = "13px" %} /* {# Used on 'body' in 'Base' | Ex. "font-size: {{ baseFontSize }};" #} */ | |
{% set baseLineHeight = "1.5" %} /* {# Used on 'body' in 'Base' | Ex. "line-height: {{ baseLineHeight }};" #} */ | |
{% set webFont1 = "Helvetica, Arial, Sans-serif" %} /* {# Ex. "font-family: {{ webFont1 }};" #} */ | |
/* Containers */ | |
{% set maxWidth = "960px" %} /* Used on '.page-center' in 'Base' and in the 'Portrait tablet to landscape and desktop' media query */ | |
/* ========================================================================== | |
Macros | |
========================================================================== */ | |
/** | |
* Create jinja macros for CSS3 properties that need browser prefixes. | |
* | |
* Apply the style as shown below on it's own CSS property line. | |
* Ignore the jinja comment tags. | |
* | |
* {# {{ variableName("values") }} #} | |
*/ | |
{% macro transition(value) -%} | |
-webkit-transition: {{ value }}; | |
-moz-transition: {{ value }}; | |
-o-transition: {{ value }}; | |
-ms-transition: {{ value }}; | |
transition: {{ value }}; | |
{%- endmacro %} | |
/** | |
* Example of how to apply the above macro (ignore the jinja comment tags): | |
* | |
* a { | |
* color: red; | |
* font-size: 12px; | |
* {# {{ transition("all .2s linear") }} #} | |
* } | |
*/ | |
/* ========================================================================== | |
Base | |
========================================================================== */ | |
/** | |
* Box Sizing | |
* | |
* Applies a natural box layout model to all elements so that width and padding | |
* are essentially combined, making responsive styles easier to manage. | |
*/ | |
*, *:before, *:after { | |
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; | |
} | |
html, body { | |
min-height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
/* Website background color and default font styles */ | |
body { | |
background: #fff; | |
color: {{ baseColor }}; | |
font-family: {{ baseFontFamily }}; | |
font-size: {{ baseFontSize }}; | |
line-height: {{ baseLineHeight }}; | |
} | |
/** | |
* Page Center | |
* | |
* Apply .page-center to full-width modules. | |
*/ | |
.container-fluid .row-fluid .page-center { | |
float: none; | |
max-width: {{ maxWidth }}; | |
margin: 0 auto; | |
} | |
a { color: {{ linkColor }}; } | |
a:hover, a:focus { color: {{ linkHover }}; } | |
hr { | |
color: #ccc; | |
background-color: #ccc; | |
height: 1px; | |
border: none; | |
} | |
/* Highlighted Text */ | |
::-moz-selection { | |
color: #fff; | |
background: {{ baseColor }}; | |
text-shadow: none; | |
} | |
::selection { | |
color: #fff; | |
background: {{ baseColor }}; | |
text-shadow: none; | |
} | |
/* Corrects width issues in table elements created via the wysiwyg editor */ | |
table tr td img { | |
max-width: initial; | |
} | |
/* ========================================================================== | |
Typography | |
========================================================================== */ | |
/* Basic text */ | |
p {} | |
small {} | |
strong {} | |
em {} | |
cite {} | |
code {} | |
pre {} | |
sup, sub { | |
position: relative; | |
font-size: 75%; | |
line-height: 0; | |
vertical-align: baseline; | |
} | |
sup { top: -0.5em; } | |
sub { bottom: -0.25em; } | |
/* Headings */ | |
h1, h2, h3, h4, h5, h6 {} | |
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {} | |
h1 {} | |
h2 {} | |
h3 {} | |
h4 {} | |
h5 {} | |
h6 {} | |
/* Lists */ | |
ul, ol {} | |
ul ul, ul ol, ol ol, ol ul {} | |
li {} | |
ul.unstyled, ol.unstyled { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
/* Quotes */ | |
blockquote {} | |
blockquote p {} | |
blockquote small {} | |
blockquote small:before {} | |
q:before, q:after, blockquote:before, blockquote:after {} | |
/* ========================================================================== | |
2. COS STRUCTURE | |
========================================================================== */ | |
/* ========================================================================== | |
Structure | |
========================================================================== */ | |
/* The outer wrappers of your website */ | |
.header-container-wrapper, | |
.body-container-wrapper, | |
.footer-container-wrapper {} | |
/* The inner wrappers of your website */ | |
.header-container, | |
.body-container, | |
.footer-container {} | |
/* ========================================================================== | |
Header | |
========================================================================== */ | |
.header-container-wrapper {} | |
.header-container {} | |
/* Logo styling */ | |
.header-container .hs_cos_wrapper_type_logo {} | |
.header-container .hs_cos_wrapper_type_logo a {} | |
.header-container .hs_cos_wrapper_type_logo a img {} | |
/* ========================================================================== | |
Content | |
========================================================================== */ | |
.body-container-wrapper {} | |
.body-container {} | |
/* Unique Pages | |
========================================================================== */ | |
/* Homepage */ | |
/* Contact Us */ | |
/* About Us */ | |
/* Modular & Reusable Components | |
========================================================================== */ | |
/* Callouts */ | |
/* Social Media Custom Icons */ | |
/* Additional Menus aside from the Main Nav */ | |
/* ========================================================================== | |
Footer | |
========================================================================== */ | |
.footer-container-wrapper {} | |
.footer-container {} | |
/* ========================================================================== | |
3. MAIN NAVIGATION | |
========================================================================== */ | |
/* ========================================================================== | |
Custom Menu Primary | |
========================================================================== */ | |
{% set ulColor = "" %} /* Set ul background color */ | |
{% set liColor = "" %} /* Set li background Color */ | |
{% set aColor = "" %} /* Set link Color */ | |
{% set aColorHover = "" %} /* Set link Hover Color */ | |
/* Parent List */ | |
.custom-menu-primary .hs-menu-wrapper > ul{ | |
background:{{ ulColor }}; | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul > li{ | |
background:{{ liColor }}; | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul > li > a{ | |
color:{{ aColor }}; | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{ | |
color:{{ aColorHover }}; | |
} | |
/* Child List */ | |
.custom-menu-primary .hs-menu-wrapper > ul ul{} | |
.custom-menu-primary .hs-menu-wrapper > ul ul li{ | |
background:{{ liColor }}; | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul ul li a{ | |
color:{{ aColor }}; | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{ | |
color:{{ aColorHover }}; | |
} | |
/* Override max width on menu links */ | |
.custom-menu-primary .hs-menu-wrapper > ul li a, | |
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { | |
overflow: visible !important; | |
max-width: none !important; | |
width: auto !important; | |
} | |
/* Fix menu disappearing on desktop after toggling mobile menu */ | |
@media screen and (min-width:768px) { | |
.custom-menu-primary .hs-menu-wrapper { | |
display:block !important; | |
} | |
} | |
/* ========================================================================== | |
Mobile Menu - Hubspot Standard Toggle Menu | |
========================================================================== */ | |
/** | |
* Special Note | |
* | |
* When the menu is open, a class of .mobile-open is applied to the body. You can | |
* use this for custom styling on any element when the menu is in the open position. | |
*/ | |
.mobile-trigger, .child-trigger{ | |
display: none; /* Hide button on Desktop */ | |
} | |
@media (max-width: 767px){ | |
/* Variables | |
========================================================================== */ | |
{% set menuColorMobile = "#000000" %} /* Set Mobile Menu Background Color */ | |
{% set aColorMobile = "#ffffff" %} /* Set Link Color */ | |
{% set aColorHoverMobile = "#ffffff" %} /* Set Link Hover Color */ | |
/* | |
* Menu Reset | |
* | |
* Remove styling from desktop version of custom-menu-primary. Place any | |
* additional CSS you want removed from the mobile menu in this reset | |
*/ | |
.custom-menu-primary, | |
.custom-menu-primary .hs-menu-wrapper > ul, | |
.custom-menu-primary .hs-menu-wrapper > ul li, | |
.custom-menu-primary .hs-menu-wrapper > ul li a{ | |
display: block; | |
float: none; | |
position: static; | |
top: auto; | |
right: auto; | |
left: auto; | |
bottom: auto; | |
padding: 0px; | |
margin: 0px; | |
background-image: none; | |
background-color: transparent; | |
border: 0px; | |
-webkit-border-radius: 0px; | |
-moz-border-radius: 0px; | |
border-radius: 0px; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
max-width: none; | |
width: 100%; | |
height: auto; | |
line-height: 1; | |
font-weight: normal; | |
text-decoration: none; | |
text-indent: 0px; | |
text-align: left; | |
color:{{aColorMobile}}; | |
} | |
/* Toggle Button | |
========================================================================== */ | |
.mobile-trigger{ | |
display: inline-block !important; /* Show button on mobile */ | |
cursor: pointer; /* Mouse pointer type on hover */ | |
position: absolute; /*******************************************/ | |
top: 0px; /* Position Button at right of screen */ | |
right: 10px; /*******************************************/ | |
width: auto; /* Button width */ | |
height: auto; /* Button height */ | |
padding: 7px 10px 8px 10px; | |
background: #ffffff; /* Background color */ | |
border: 1px solid {{ menuColorMobile }}; | |
font-size: 16px; | |
font-weight: normal; | |
text-align: left; | |
text-transform: uppercase; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
color: {{ menuColorMobile }}; | |
} | |
.mobile-trigger:hover{ | |
text-decoration: none; /* Removes link text underline on button */ | |
color:{{ aColorHoverMobile }}; | |
background-color: {{ menuColorMobile }}; | |
border-color: transparent; | |
} | |
/* Change button when menu is open */ | |
.mobile-open .mobile-trigger{ | |
color:{{ aColorHoverMobile }}; | |
background-color: {{ menuColorMobile }}; | |
border-color: transparent; | |
} | |
/* Toggle Button Icon | |
========================================================================== */ | |
.mobile-trigger i{ | |
display: inline; | |
position: relative; | |
top: -4px; | |
} | |
.mobile-trigger i:before, .mobile-trigger i:after{ | |
position: absolute; | |
content: ''; | |
} | |
.mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{ | |
width: 22px; /* Icon line width */ | |
height: 2px; /* Icon line height */ | |
-webkit-border-radius: 1px; | |
-moz-border-radius: 1px; | |
border-radius: 1px; | |
background-color: {{ menuColorMobile }}; /* Icon color */ | |
display: inline-block; | |
} | |
.mobile-trigger i:before{ | |
top: -6px; /* Position top line */ | |
} | |
.mobile-trigger i:after{ | |
top: 6px; /* Position bottom line */ | |
} | |
.mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after, | |
.mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{ | |
background-color: {{ aColorHoverMobile }}; /* Icon color */ | |
} | |
/* Child Toggle Button | |
========================================================================== */ | |
.child-trigger{ | |
display: block !important; /* Hide button on Desktop */ | |
cursor: pointer; /* Mouse pointer type on hover */ | |
position: absolute; | |
top: 0px; | |
right: 0px; | |
width: 55px !important; /* Button width */ | |
min-width: 55px !important; | |
height: 45px !important; /* Button height */ | |
padding: 0 !important; | |
border-left: 1px dotted rgba(255, 255, 255, .20); | |
} | |
.child-trigger:hover{ | |
text-decoration: none; | |
} | |
.child-trigger i{ | |
position: relative; | |
top: 50%; /* Centers icon inside button */ | |
margin: 0 auto !important; | |
} | |
.child-trigger i:after{ | |
position: absolute; | |
content: ''; | |
} | |
.child-trigger i, .child-trigger i:after{ | |
width: 10px; /* Icon line width */ | |
height: 1px; /* Icon line height */ | |
background-color:{{ aColorMobile }}; /* Icon color */ | |
display: block; | |
} | |
.child-trigger i:after{ | |
-webkit-transform: rotate(-90deg); | |
-ms-transform: rotate(-90deg); | |
transform: rotate(-90deg); | |
} | |
.child-trigger.child-open i:after{ | |
-webkit-transform: rotate(-180deg); | |
-ms-transform: rotate(-180deg); | |
transform: rotate(-180deg); | |
} | |
.child-trigger.child-open i{ | |
-webkit-transform: rotate(180deg); | |
-ms-transform: rotate(180deg); | |
transform: rotate(180deg); | |
} | |
/* Menu Styles on Mobile Devices | |
========================================================================== */ | |
.custom-menu-primary.js-enabled{ | |
position: relative; | |
padding-top: 44px; /* Makes room for button */ | |
margin: 10px 0 10px 0; | |
} | |
/* Hide menu on mobile */ | |
.custom-menu-primary.js-enabled .hs-menu-wrapper, | |
.custom-menu-primary.js-enabled .hs-menu-children-wrapper{ | |
display: none; | |
} | |
/* Make child lists appear below parent items */ | |
.custom-menu-primary ul.hs-menu-children-wrapper{ | |
visibility: visible !important; | |
opacity: 1 !important; | |
position: static !important; | |
display: none; | |
} | |
/* Mobile Menu Styles */ | |
.custom-menu-primary.js-enabled .hs-menu-wrapper{ | |
width: 100%; | |
position: relative; /**************************************************************/ | |
top: 0; /* Positions the menu to drop from the very top of the screen */ | |
left: 0; /**************************************************************/ | |
padding: 0; | |
} | |
.custom-menu-primary .hs-menu-wrapper{ | |
background-color:{{ menuColorMobile }}; /* Menu background color set off global menuColorMobile variable */ | |
width: 100%; /* Full screen width */ | |
} | |
/* Level 1 Menu List Styles */ | |
.custom-menu-primary .hs-menu-wrapper > ul > li{ | |
position: relative; | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul > li a{ | |
font-size: 22px; /* Font size of top level list items */ | |
line-height: 45px; | |
overflow: visible; | |
} | |
/* Level 1 and Higher Menu List Styles */ | |
.custom-menu-primary .hs-menu-wrapper > ul li{ | |
border-top: 1px dotted rgba(255, 255, 255, .35); /* Adds transparent dark highlights to top of top level list items */ | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul li a{ | |
padding: 0 10px; | |
color:{{ aColorMobile }}; /* link color set by global mobile-aColor variable */ | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul li a:hover{ | |
color:{{ aColorHoverMobile }}; /* link hover color set by global mobile-aColorHover variable */ | |
} | |
/* Level 2 and Higher Menu List Styles */ | |
.custom-menu-primary .hs-menu-wrapper > ul ul li{ | |
background-color: rgba(255, 255, 255, .08); | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul ul li a{ | |
text-indent: 10px; /* Indent Child lists */ | |
font-size: 16px; /* Font size of child lists */ | |
} | |
/* Level 3 and Higher Menu List Styles */ | |
.custom-menu-primary .hs-menu-wrapper > ul ul ul li a{ | |
text-indent: 30px; /* Indent Child lists */ | |
} | |
.custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a{ | |
text-indent: 50px; /* Indent Child lists */ | |
} | |
} | |
/* ========================================================================== | |
4. TEMPLATE MODULE SELECTORS | |
========================================================================== */ | |
/* Common Template Selectors | |
========================================================================== */ | |
body.one-column {} | |
body.two-column {} | |
body.three-column {} | |
.content-wrapper {} | |
.main-content {} | |
.sidebar{} | |
.sidebar.right{} | |
.sidebar.left{} | |
/* Common One Column Selectors */ | |
body.site-page.one-column, | |
body.landing-page.one-column, | |
body.error-template.one-column, | |
body.password-template.one-column, | |
body.subscription-template.one-column {} | |
body.site-page.one-column .main-content, | |
body.landing-page.one-column .main-content, | |
body.error-template .main-content, | |
body.password-template .main-content, | |
body.subscription-template .main-content {} | |
/* Common Two Column Selectors */ | |
body.site-page.two-column, | |
body.landing-page.two-column, | |
body.blog {} | |
body.site-page.two-column .main-content, | |
body.landing-page.two-column .main-content, | |
body.blog .blog-content {} | |
/* Common Three Column Selectors */ | |
body.site-page.three-column, | |
body.landing-page.three-column {} | |
body.site-page.three-column .main-content, | |
body.landing-page.three-column .main-content {} | |
/* Site Pages | |
========================================================================== */ | |
/* One Column Template */ | |
body.site-page.one-column {} | |
body.site-page.one-column .content-wrapper {} | |
body.site-page.one-column .main-content {} | |
/* Two Column Template */ | |
body.site-page.two-column {} | |
body.site-page.two-column .content-wrapper {} | |
body.site-page.two-column .main-content {} | |
body.site-page.two-column .sidebar.right {} | |
/* Three Column Template */ | |
body.site-page.three-column {} | |
body.site-page.three-column .content-wrapper {} | |
body.site-page.three-column .main-content {} | |
/* Landing Pages | |
========================================================================== */ | |
/* One Column Template */ | |
body.landing-page.one-column {} | |
body.landing-page.one-column .content-wrapper {} | |
body.landing-page.one-column .main-content {} | |
/* Two Column Template */ | |
body.landing-page.two-column {} | |
body.landing-page.two-column .content-wrapper {} | |
body.landing-page.two-column .main-content {} | |
body.landing-page.two-column .sidebar.right {} | |
/* Three Column Template */ | |
body.landing-page.three-column {} | |
body.landing-page.three-column .content-wrapper {} | |
body.landing-page.three-column .main-content {} | |
/* System Pages | |
========================================================================== */ | |
/* Error Templates 404, 500 */ | |
body.error-template.one-column {} | |
body.error-template.one-column .content-wrapper {} | |
body.error-template.one-column .main-content {} | |
/* Password template */ | |
body.password-template.one-column {} | |
body.password-template.one-column .content-wrapper {} | |
body.password-template.one-column .main-content {} | |
/* Email Subscribition templates */ | |
body.subscription-template.one-column {} | |
body.subscription-template.one-column .content-wrapper {} | |
body.subscription-template.one-column .main-content {} | |
/* ========================================================================== | |
5. COS COMPONENTS | |
========================================================================== */ | |
/* ========================================================================== | |
Blog | |
========================================================================== */ | |
/* Blog Post and Listing Body Class */ | |
body.blog {} | |
/* Blog Post */ | |
body.hs-blog-post {} | |
/* Blog Listing */ | |
body.hs-blog-listing {} | |
/* Blog Columns Wrapper */ | |
.blog .content-wrapper {} | |
/* Blog Content Column | |
========================================================================== */ | |
.blog .blog-content {} | |
/* Use this to style the main wrapper for the blog listing pages */ | |
.blog-listing-wrapper {} | |
/* Use this to style the main wrapper for the blog post pages */ | |
.blog-post-wrapper {} | |
/* Blog Title */ | |
.hs-blog-header h1 {} | |
.hs-blog-header h1 a{} | |
/* Blog Post Title */ | |
.post-header h2 {} | |
.post-header h2 a {} | |
/* Blog Author and Avatar */ | |
#hubspot-author_data {} | |
#hubspot-author_data a.author-link {} | |
#hubspot-author_data .hs-author-avatar {} | |
#hubspot-author_data .hs-author-avatar img {} | |
/* Use this to set up different styling for your blog posts */ | |
.blog-listing-wrapper .post-listing .post-item {} | |
.blog-listing-wrapper .post-listing .post-item .post-body {} | |
.blog-post-wrapper .post-body {} | |
/* Post Featured Image on Listings Page */ | |
.hs-featured-image-wrapper {} | |
.hs-featured-image-wrapper .hs-featured-image-link {} | |
.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image{ | |
border-width: 0; | |
max-height: 170px; | |
max-width: 210px; | |
height: auto; | |
width: auto; | |
display: inline-block !important; | |
float: right; | |
margin: 20px 0 20px 20px; | |
} | |
/* Read More Link */ | |
a.more-link {} | |
/* Blog Topics List */ | |
#hubspot-topic_data {} | |
#hubspot-topic_data a.topic-link {} | |
/** | |
* Blog Social Sharing icons | |
* | |
* Overrides defaults to better align icons and prevent overlapping | |
*/ | |
.hs-blog-social-share { | |
padding: 10px 0 0 0; | |
border-top: 1px solid #cccccc; | |
border-bottom: 1px solid #cccccc; | |
height: auto; | |
} | |
/** | |
* Blog Commments | |
* | |
* Custom styles are listed below, as the COS does not provide default styles. | |
*/ | |
#comments-listing { | |
border-bottom: 1px solid #ccc; | |
margin-bottom: 30px; | |
margin-top: 30px; | |
} | |
.comment { | |
margin: 10px 0; | |
border-top: 1px solid #ccc; | |
padding: 15px 0; | |
} | |
.comment-date { font-size: 13px; text-align: right; } | |
.comment-from { font-weight: bold; } | |
.comment-body { padding: 10px 0; } | |
/* Pagination */ | |
.blog-pagination {} | |
.blog-pagination a {} | |
.blog-pagination a.previous-posts-link {} | |
.blog-pagination a.all-posts-link {} | |
.blog-pagination a.next-posts-link {} | |
/** | |
* Blog Author Page | |
* | |
* ALWAYS be sure to set styles to these selectors, as the COS does not provide default styles | |
*/ | |
.hs-author-profile {} | |
.hs-author-profile h2.hs-author-name {} | |
.hs-author-profile .hs-author-bio {} | |
.hs-author-profile .hs-author-avatar {} | |
.hs-author-profile .hs-author-avatar img {} | |
h3.hs-author-listing-header {} | |
/** | |
* Blog All Posts Page | |
* | |
* ALWAYS be sure to set styles to these selectors, as the COS does not provide default styles | |
*/ | |
body.hs-content-path-blog-all {} | |
div.post-listing-simple {} | |
div.post-listing-simple .post-item {} | |
h2.post-listing-simple {} | |
h2.post-listing-simple a {} | |
/* Blog Sidebar | |
========================================================================== */ | |
.blog .blog-sidebar {} | |
/* Blog Modules */ | |
.blog .blog-sidebar .widget-span {} | |
/* ========================================================================== | |
Forms | |
========================================================================== */ | |
/* All Global Forms | |
========================================================================== */ | |
/* Form Field */ | |
body .hs-form-field {} | |
/* Descriptions */ | |
body .hs-field-desc {} | |
/* Labels */ | |
body label {} | |
body .hs-form-field > label {} | |
/* One Line Inputs */ | |
body input[type="text"], | |
body input[type="password"], | |
body input[type="datetime"], | |
body input[type="datetime-local"], | |
body input[type="date"], | |
body input[type="month"], | |
body input[type="time"], | |
body input[type="week"], | |
body input[type="number"], | |
body input[type="email"], | |
body input[type="url"], | |
body input[type="search"], | |
body input[type="tel"], | |
body input[type="color"], | |
body input[type="file"], | |
body textarea, | |
body select { | |
width: 100%; | |
font-family: {{ baseFontFamily }}; | |
font-size: {{ baseFontSize }}; | |
} | |
body input[type="text"]:focus, | |
body input[type="password"]:focus, | |
body input[type="datetime"]:focus, | |
body input[type="datetime-local"]:focus, | |
body input[type="date"]:focus, | |
body input[type="month"]:focus, | |
body input[type="time"]:focus, | |
body input[type="week"]:focus, | |
body input[type="number"]:focus, | |
body input[type="email"]:focus, | |
body input[type="url"]:focus, | |
body input[type="search"]:focus, | |
body input[type="tel"]:focus, | |
body input[type="color"]:focus, | |
body input[type="file"]:focus, | |
body textarea:focus, | |
body select:focus {} | |
/* Separate Styles for Multiple Line Inputs */ | |
body textarea {} | |
body textarea:focus {} | |
/* Separate Styles for Drop Downs */ | |
body select {} | |
body select:focus {} | |
/* Multiple Selection Inputs */ | |
body form.hs-form .hs-form-field ul.inputs-list { | |
list-style: none; | |
padding: 0; | |
} | |
body form.hs-form .hs-form-field ul.inputs-list li input {} | |
body input[type="radio"] {} | |
body input[type="checkbox"] {} | |
/* Required */ | |
body input:focus:required:invalid, | |
body textarea:focus:required:invalid, | |
body select:focus:required:invalid {} | |
body input:focus:required:invalid:focus, | |
body textarea:focus:required:invalid:focus, | |
body select:focus:required:invalid:focus {} | |
/* Placeholder Text */ | |
::-webkit-input-placeholder { /* Webkit Browsers */ | |
/* color: #555; | |
opacity: 1; */ | |
} | |
:-moz-placeholder { /* Firefox 18- */ | |
/* color: #555; | |
opacity: 1; */ | |
} | |
::-moz-placeholder { /* Firefox 19+ */ | |
/* color: #555; | |
opacity: 1; */ | |
} | |
:-ms-input-placeholder { /* IE10 */ | |
/* color: #555; | |
opacity: 1; */ | |
} | |
/* Form Module | |
========================================================================== */ | |
/* Form Field */ | |
.hs_cos_wrapper_type_form .hs-form-field {} | |
/* Descriptions */ | |
.hs_cos_wrapper_type_form .hs-field-desc {} | |
/* Labels */ | |
.hs_cos_wrapper_type_form label {} | |
.hs_cos_wrapper_type_form .hs-form-field > label {} | |
/* One Line Inputs */ | |
.hs_cos_wrapper_type_form input[type="text"], | |
.hs_cos_wrapper_type_form input[type="password"], | |
.hs_cos_wrapper_type_form input[type="datetime"], | |
.hs_cos_wrapper_type_form input[type="datetime-local"], | |
.hs_cos_wrapper_type_form input[type="date"], | |
.hs_cos_wrapper_type_form input[type="month"], | |
.hs_cos_wrapper_type_form input[type="time"], | |
.hs_cos_wrapper_type_form input[type="week"], | |
.hs_cos_wrapper_type_form input[type="number"], | |
.hs_cos_wrapper_type_form input[type="email"], | |
.hs_cos_wrapper_type_form input[type="url"], | |
.hs_cos_wrapper_type_form input[type="search"], | |
.hs_cos_wrapper_type_form input[type="tel"], | |
.hs_cos_wrapper_type_form input[type="color"], | |
.hs_cos_wrapper_type_form input[type="file"], | |
.hs_cos_wrapper_type_form textarea, | |
.hs_cos_wrapper_type_form select {} | |
.hs_cos_wrapper_type_form input[type="text"]:focus, | |
.hs_cos_wrapper_type_form input[type="password"]:focus, | |
.hs_cos_wrapper_type_form input[type="datetime"]:focus, | |
.hs_cos_wrapper_type_form input[type="datetime-local"]:focus, | |
.hs_cos_wrapper_type_form input[type="date"]:focus, | |
.hs_cos_wrapper_type_form input[type="month"]:focus, | |
.hs_cos_wrapper_type_form input[type="time"]:focus, | |
.hs_cos_wrapper_type_form input[type="week"]:focus, | |
.hs_cos_wrapper_type_form input[type="number"]:focus, | |
.hs_cos_wrapper_type_form input[type="email"]:focus, | |
.hs_cos_wrapper_type_form input[type="url"]:focus, | |
.hs_cos_wrapper_type_form input[type="search"]:focus, | |
.hs_cos_wrapper_type_form input[type="tel"]:focus, | |
.hs_cos_wrapper_type_form input[type="color"]:focus, | |
.hs_cos_wrapper_type_form input[type="file"]:focus, | |
.hs_cos_wrapper_type_form textarea:focus, | |
.hs_cos_wrapper_type_form select:focus {} | |
/* Separate Styles for Multiple Line Inputs */ | |
.hs_cos_wrapper_type_form textarea {} | |
.hs_cos_wrapper_type_form textarea:focus {} | |
/* Separate Styles for Drop Downs */ | |
.hs_cos_wrapper_type_form select {} | |
.hs_cos_wrapper_type_form select:focus {} | |
/* Multiple Selection Inputs */ | |
.hs_cos_wrapper_type_form form.hs-form .hs-form-field ul.inputs-list li input {} | |
.hs_cos_wrapper_type_form input[type="radio"] {} | |
.hs_cos_wrapper_type_form input[type="checkbox"] {} | |
/* Blog Comment Form | |
========================================================================== */ | |
/* Label */ | |
#comment-form .hs-form-field > label {} | |
#comment-form label {} | |
/* Inputs */ | |
#comment-form input[type="text"] {} | |
#comment-form input[type="text"]:focus {} | |
#comment-form textarea {} | |
#comment-form textarea:focus {} | |
#comment-form input[type="checkbox"] {} | |
/* Error */ | |
body .hs-common-error-message {} | |
/* Blog Subscription Form | |
========================================================================== */ | |
/* Label */ | |
#hs_form_target_blog_subscription .hs-form-field > label {} | |
#hs_form_target_blog_subscription label {} | |
/* Inputs */ | |
#hs_form_target_blog_subscription input[type="email"] {} | |
#hs_form_target_blog_subscription input[type="email"]:focus {} | |
#hs_form_target_blog_subscription input[type="radio"], #hs_form_target_blog_subscription input[type="checkbox"] { | |
width: auto; | |
margin-right: 10px; | |
} | |
/* Google Search Form | |
========================================================================== */ | |
/* Label */ | |
.widget-type-google_search label {} | |
/* Input */ | |
.widget-type-google_search input[type="text"] {} | |
.widget-type-google_search input[type="focus"] {} | |
/* Multi Column Form | |
========================================================================== */ | |
body .hs-form fieldset.form-columns-1 {} | |
body .hs-form fieldset.form-columns-1 .hs-form-field {} | |
body .hs-form fieldset.form-columns-2 {} | |
body .hs-form fieldset.form-columns-2 .hs-form-field {} | |
body .hs-form fieldset.form-columns-3 {} | |
body .hs-form fieldset.form-columns-3 .hs-form-field {} | |
/* Multiple Selection Inputs */ | |
body form.hs-form .hs-form-field ul.inputs-list li input {} | |
body input[type="radio"] {} | |
body input[type="checkbox"] {} | |
body form.hs-form fieldset { max-width: none; } | |
body form.hs-form fieldset .hs-form-field { padding: 0 10px 0 0; } | |
body form.hs-form fieldset[class*="form-columns"] .input { margin-right: 0; } | |
body form.hs-form fieldset[class*="form-columns"] .hs-input { width: 100%; } | |
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="checkbox"] { width: auto; } | |
body form.hs-form fieldset.form-columns-3 .hs-form-field { width: 33.33%; } | |
@media (max-width: 400px) { | |
body form.hs-form fieldset .hs-form-field { padding: 0; } | |
body form.hs-form fieldset.form-columns-3 .hs-form-field, | |
body form.hs-form .form-columns-2 .hs-form-field .hs-input, | |
body form.hs-form .form-columns-3 .hs-form-field .hs-input { width: 100%; } | |
body form.hs-form .form-columns-3 .hs-form-field .hs-input[type="checkbox"] { width: auto; } | |
} | |
/* ========================================================================== | |
Buttons | |
========================================================================== */ | |
/* All Global Buttons (Excluding CTAs) | |
========================================================================== */ | |
body .hs-button.primary, | |
body input[type="submit"], | |
body input[type="button"] { | |
cursor: pointer; | |
-webkit-appearance: none; | |
font-family: {{ baseFontFamily }}; | |
font-size: {{ baseFontSize }}; | |
text-decoration: none !important; | |
} | |
body .hs-button.primary:hover, | |
body input[type="submit"]:hover, | |
body input[type="button"]:hover {} | |
body .hs-button.primary:focus, | |
body input[type="submit"]:focus, | |
body input[type="button"]:focus {} | |
/* Form Module Button | |
========================================================================== */ | |
.hs_cos_wrapper_type_form .hs-button.primary.large {} | |
.hs_cos_wrapper_type_form .hs-button.primary.large:hover {} | |
.hs_cos_wrapper_type_form .hs-button.primary.large:focus {} | |
/* Blog Comment Button | |
========================================================================== */ | |
#add-comment-button.hs-button.primary {} | |
#add-comment-button.hs-button.primary:hover {} | |
#add-comment-button.hs-button.primary:focus {} | |
/* Blog Subscription Button | |
========================================================================== */ | |
#hs_form_target_blog_subscription .hs-button.primary.large {} | |
#hs_form_target_blog_subscription .hs-button.primary.large:hover {} | |
#hs_form_target_blog_subscription .hs-button.primary.large:focus {} | |
/* Google Search Button | |
========================================================================== */ | |
.widget-type-google_search .hs-button.primary {} | |
.widget-type-google_search .hs-button.primary:hover {} | |
.widget-type-google_search .hs-button.primary:focus {} | |
/* CTA Buttons | |
========================================================================== */ | |
/** | |
* Override global CTA styles by wrapping the CTA module in a module group | |
* that has an ID, and use that ID to prefix your CTA selector. Example shown below. | |
* | |
* All overriding properties require !important tags. | |
*/ | |
#module-group-ID .cta_button {} | |
#module-group-ID .cta_button:hover {} | |
#module-group-ID .cta_button:focus {} | |
/* ========================================================================== | |
6. MISCELLANOUS | |
========================================================================== */ | |
/** | |
* Styles that do not fit into available sections above can go here. | |
* For example, one would place 3rd party plugin overriding styles here. | |
* | |
* This section is NOT for 'Custom' styles. All custom styles must go in the | |
* proper sections above. | |
* | |
* For instance, custom header and footer styles must go in the HEADER and | |
* FOOTER sections. Custom styles for anything in-between the header and footer | |
* (such as, styles that are unique to the HOMEPAGE only), must go in the | |
* CONTENT section. | |
*/ | |
/* ========================================================================== | |
7. MOBILE MEDIA QUERIES | |
========================================================================== */ | |
/* Screen sizes smaller than site maxWidth (.page-center) | |
========================================================================== */ | |
@media (max-width: {{maxWidth}}) {} | |
/* Landscape tablet and smaller devices | |
========================================================================== */ | |
@media (max-width: 767px) {} | |
/* Landscape phones and smaller devices | |
========================================================================== */ | |
@media (max-width: 479px) {} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment