Skip to content

Instantly share code, notes, and snippets.

@ivapie

ivapie/gist:c2a978c281595796f43ce9de83ae76f3

Created October 11, 2016 15:50
Show Gist options
  • Save ivapie/c2a978c281595796f43ce9de83ae76f3 to your computer and use it in GitHub Desktop.
Save ivapie/c2a978c281595796f43ce9de83ae76f3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
$pathURL: 'https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/';
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
@font-face {
font-family: 'AvenirNextRegular';
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.eot');
/* IE9 Compat Modes */
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.woff') format('woff'), /* Pretty Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.svg#svgFontName') format('svg');
/* Legacy iOS */
}
@font-face {
font-family: 'AvenirNextMedium';
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.eot');
/* IE9 Compat Modes */
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.woff2') format('woff2'), /* Super Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.woff') format('woff'), /* Pretty Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.svg#svgFontName') format('svg');
/* Legacy iOS */
}
@font-face {
font-family: 'AvenirNextDemi';
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.eot');
/* IE9 Compat Modes */
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.woff2') format('woff2'), /* Super Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.woff') format('woff'), /* Pretty Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.svg#svgFontName') format('svg');
/* Legacy iOS */
}
@font-face {
font-family: 'GrotesqueMedium';
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.eot');
/* IE9 Compat Modes */
src: url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.woff2') format('woff2'), /* Super Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.woff') format('woff'), /* Pretty Modern Browsers */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.svg#svgFontName') format('svg');
/* Legacy iOS */
}
//Colors
$qb-blue: #0076c5;
$qb-green: #2ca01c;
$qb-gray-text: #393a3d;
$qb-light-gray: #eceef1;
$qb-gray04: #babec5;
$qb-gray05: #d4d7dc;
$qb-gray06: #8d9096;
$qb-white: #fff;
$qb-green-button: #018100;
$qb-gray-background: #d4d7dc;
$qb-gray-background02: #f4f5f8;
$qb-gray-dark-background: #494c53;
$qb-green-background: #53b700;
body{
position: relative;
}
.qb-wrapper {
color: $qb-gray-text;
font-size: 15px;
font-family: 'AvenirNextRegular';
a {
color: $qb-gray-text;
-webkit-transition: color 0.5s;
transition: color 0.5s;
&:hover,
&.active {
color: $qb-blue;
}
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize -- included in bootstrap3 */
a:hover {
text-decoration: none
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0
}
// Base intuit
h1 {
font-size: 36px;
font-family: 'GrotesqueMedium';
}
.h1.b {
font-size: 24px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 19px;
}
// Space only top
.qb-space-top-lg {
padding: 60px 0 0 0;
margin: 0;
}
.qb-space-top-md {
padding: 40px 0 0 0;
margin: 0;
}
.qb-space-top-sm {
padding: 20px 0 0 0;
margin: 0;
}
.qb-space-top-xs {
padding: 8px 0 0 0;
margin: 0;
}
// Space
.qb-space-lg {
padding: 60px;
margin: 0;
}
.qb-space-md {
padding: 40px;
margin: 0;
}
.qb-space-sm {
padding: 20px;
margin: 0;
}
.qb-space-xs {
padding: 8px;
margin: 0;
}
.qb-list-horizontal {
display: inline-block;
padding: 0;
li {
display: inline-block;
}
}
.qb-button {
background: $qb-green-button;
border: 0px;
border-radius: 4px;
font-size: 15px;
font-family: 'AvenirNextDemi';
padding: 6px 16px;
-webkit-transition: background 0.5s;
transition: background 0.5s;
color: $qb-white;
&:hover {
background: $qb-green;
}
}
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.h-ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
.v-ellipsis {
display: block;
/* Fallback for non-webkit */
display: -webkit-box;
// -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.qb-input-text {
height: 30px;
font-size: 15px;
border: 1px solid $qb-gray-text;
padding: 0 5px;
border-radius: 4px;
width: 100%;
color: $qb-gray-text;
}
.btn-border {
border: 2px solid #000;
border-radius: 4px;
padding: 7px 14px;
font-size: 19px;
background: $qb-white;
font-family: 'AvenirNextDemi';
color: $qb-gray-text!important;
&:hover {
color: $qb-white!important;
text-decoration: none!important;
background: $qb-gray-text;
}
}
.qb-background-gray {
background: $qb-gray-background02
}
}
// qb-call-in-action-floating-component
.qb-call-in-action-floating-component {
@extend .qb-space-sm;
background: $qb-gray-dark-background;
color: $qb-white;
width: 220px;
min-height: 295px;
margin-right: 20px;
margin-top: -148px;
position: fixed;
top: 50%;
right: 0;
z-index: 999;
opacity: 1;
filter: alpha(opacity=1);
/* For IE8 and earlier */
-webkit-transition: opacity 0.5s, margin-right 0.5s;
transition: opacity 0.5s, margin-right 0.5s;
.graphic {
background-position: top center;
background-size: cover;
height: 61px;
width: 100%;
margin: 20px auto;
}
p {
margin: 10px 0 0 0;
font-size: 15px;
}
input[type="text"] {
@extend .qb-input-text;
}
button {
@extend .qb-button;
margin-top: 16px;
}
}
@media only screen and (max-width: 1024px) {
.qb-call-in-action-floating-component {
opacity: 0;
filter: alpha(opacity=0);
margin-right: -9999px;
/* For IE8 and earlier */
}
}
// qb-post-banner-component
.qb-post-banner-component {
background: $qb-white;
border-bottom: 1px solid $qb-gray05;
.description {
@extend .qb-space-top-lg;
position: relative;
padding-bottom: 82px;
min-height: 340px;
padding-left: 0;
padding-right: 0;
h1 {
font-size: 44px;
}
p {
margin: 15px 0 0 0;
font-size: 19px;
a {
color: $qb-blue;
&:hover {
text-decoration: underline;
}
}
}
span {
margin: 2px 0 0 0;
font-size: 15px;
display: block;
}
ul {
position: absolute;
width: 100%;
height: auto;
bottom: 40px;
margin: 0;
@extend .qb-list-horizontal;
li {
margin-right: 2px;
i {
font-size: 20px;
}
}
}
}
.side-right {
@extend .qb-space-top-lg;
.graphic {
background-position: top center;
background-size: cover;
height: 248px;
width: 100%;
margin: 0 auto;
}
}
}
@media only screen and (max-width: 767px) {
.qb-post-banner-component {
.description {
min-height: auto;
padding-left: 0!important;
padding-right: 0!important;
}
.side-right {
padding: 0;
.graphic {}
}
}
}
// .qb-post-popular-component
.qb-post-popular-component {
.title {
background: $qb-gray-text;
color: $qb-white;
padding: 10px 8px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
li {
border-top: 1px solid $qb-gray-background;
a {
display: block;
padding: 13px 8px;
&:hover {
text-decoration: underline;
}
}
&:first-child {
border-top: 0;
}
}
}
}
// .qb-post-keep-component
.qb-post-keep-component {
clear: both;
.title {
@extend .qb-space-top-md;
font-size: 19px;
font-family: 'AvenirNextDemi';
}
ul {
padding: 14px 0 0 0;
li {
float: left;
margin: 0 12px 9px 0;
list-style: none;
a {
display: block;
padding: 6px 16px;
background: $qb-gray05;
-webkit-transition: background 0.5s;
transition: background 0.5s;
&:hover,
&.active {
background: $qb-gray06;
color: $qb-white;
}
}
}
}
}
// qb-post-related-component
.qb-post-related-component {
padding-bottom: 60px;
h1 {
@extend .qb-space-top-md;
}
.row {
@extend .qb-space-top-sm;
.section {
padding-left: 10px;
padding-right: 10px;
.graphic {
background-size: cover;
background-position: center;
width: 100%;
height: 137px;
}
.description {
@extend .qb-space-sm;
border-bottom: 1px solid $qb-gray05;
height: 235px;
background: $qb-white;
h2 {
font-size: 19px;
@extend .qb-space-top-sm;
@extend .v-ellipsis;
-webkit-line-clamp: 2;
}
p {
@extend .qb-space-top-sm;
@extend .v-ellipsis;
-webkit-line-clamp: 3;
font-size: 15px;
}
a {
color: $qb-blue;
font-size: 15px;
}
span {
text-transform: uppercase;
color: $qb-gray04;
display: block;
font-size: 15px;
}
}
}
}
}
@media only screen and (max-width: 767px) {
.qb-post-related-component .row .section {
margin-bottom: 20px;
padding-left: 0!important;
padding-right: 0!important;
.description {
height: auto;
}
}
}
@media only screen and (min-width: 768px) {
.qb-post-related-component .section {
&:first-child {
padding-left: 0!important;
}
&:last-child {
padding-right: 0!important;
}
}
}
// qb-post-component
.qb-post-component {
font-size: 19px;
h2 {
font-family: 'GrotesqueMedium';
font-size: 34px;
margin-bottom: 11px;
}
h3 {
font-family: 'AvenirNextDemi';
}
p {
margin: 0 0 23px 0;
line-height: 1.3;
}
img {
margin: 0 auto 23px auto;
display: block;
}
quote {
font-size: 30px;
color: $qb-green;
text-align: center;
font-family: 'GrotesqueMedium';
display: block;
margin-bottom: 23px;
width: 90%;
line-height: 1.2;
}
a {
color: $qb-blue;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment