Remove unused SASS files
Francis Lachapelle
parent
383ccdbc82
commit
ee9ef2f0e4
|
|
@ -1,55 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Articles list
|
||||
*
|
||||
**/
|
||||
|
||||
.articles-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.articles-list__item {
|
||||
|
||||
padding-bottom: $lineHeight * 2;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: $lineHeight * 2 + 1;
|
||||
}
|
||||
|
||||
padding-left: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 40%;
|
||||
height: 1px;
|
||||
box-shadow: inset 0 1px 0 0 $colorGrayKeyline;
|
||||
margin-right: 0;
|
||||
margin-left: 30%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: $lineHeight;
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
|
||||
@include medium {
|
||||
padding-top: $lineHeight - 2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Breadcrumb
|
||||
*
|
||||
**/
|
||||
|
||||
.breadcrumbs {
|
||||
display: none;
|
||||
@include medium {
|
||||
display: block;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.breadcrumbs p {
|
||||
@include type--small;
|
||||
padding-top: $lineHeight;
|
||||
}
|
||||
|
||||
.breadcrumbs__link {
|
||||
@include type--small;
|
||||
color: black;
|
||||
font-weight: 400;
|
||||
padding-top: 0;
|
||||
|
||||
@include medium {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Button
|
||||
*
|
||||
**/
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: (($lineHeight / 2) - 1) 32px;
|
||||
margin-bottom: $lineHeight / 2;
|
||||
margin-top: $lineHeight / 2;
|
||||
min-height: $lineHeight;
|
||||
|
||||
text-align: center;
|
||||
|
||||
font-family: $fontHighlight;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
|
||||
outline: 0;
|
||||
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
background: #4d4d4d;
|
||||
color: #ffffff;
|
||||
border: 1px solid #4d4d4d;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin to create buttons
|
||||
@mixin style-button($color, $textColor, $isInverted: false) {
|
||||
|
||||
background: $color;
|
||||
color: $textColor;
|
||||
border: 1px solid darken($color, 10%);
|
||||
|
||||
@if $isInverted { border-color: transparent;}
|
||||
}
|
||||
|
||||
|
||||
.button--primary {
|
||||
@extend .button;
|
||||
@include style-button(#4285f4, #ffffff);
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
@extend .button;
|
||||
@include style-button(#ffffff, $colorBlue);
|
||||
}
|
||||
|
||||
.button--secondary-variation {
|
||||
@extend .button;
|
||||
@include style-button(#ffffff, $colorBlue, true);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Column list
|
||||
*
|
||||
**/
|
||||
|
||||
.columns-list-wrapper {
|
||||
@include wide {
|
||||
margin-right: $mediumColWidth;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list--columns {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: $lineHeight - 1;
|
||||
margin-bottom: 1px;
|
||||
|
||||
@include medium {
|
||||
column-count: 2;
|
||||
column-rule: 0 none transparent;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
& li,
|
||||
& .columns-list-item {
|
||||
@include type--small;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 39px;
|
||||
|
||||
&::before {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Grid
|
||||
*
|
||||
**/
|
||||
|
||||
|
||||
@include medium-only {
|
||||
// Generating grid classes for medium view
|
||||
@for $i from 1 through $mediumColCount {
|
||||
.g-medium--#{$i} {
|
||||
@include rule--col(medium);
|
||||
width: ($mediumColWidth*$i) + ($mediumGutterWidth*($i + -1));
|
||||
@if $i == $mediumColCount { margin-right: 0; }
|
||||
}
|
||||
|
||||
@if $i < $mediumColCount {
|
||||
.g-medium--push-#{$i} {
|
||||
margin-left: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
|
||||
}
|
||||
.g-medium--pull-#{$i} {
|
||||
margin-right: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-medium--full {
|
||||
@include rule--col(medium);
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.g--third {
|
||||
@include rule--col(medium);
|
||||
width: $mediumColWidth;
|
||||
}
|
||||
|
||||
.g--half,
|
||||
.g-medium--half {
|
||||
@include rule--col(medium);
|
||||
width: 50% - $mediumGutterWidth/2;
|
||||
}
|
||||
|
||||
.g-medium--last { margin-right: 0; }
|
||||
.g-medium--last + .g-medium--half { clear: left; }
|
||||
|
||||
.g--pull-half { margin-right: 50% + $mediumGutterWidth/2; }
|
||||
}
|
||||
|
||||
|
||||
@include wide {
|
||||
// Generating grid classes for wide view
|
||||
@for $i from 1 through $wideColCount {
|
||||
.g-wide--#{$i} {
|
||||
@include rule--col(wide);
|
||||
width: ($wideColWidth*$i) + ($wideGutterWidth*($i + -1));
|
||||
@if $i == $wideColCount { margin-right: 0; }
|
||||
}
|
||||
|
||||
@if $i < $wideColCount {
|
||||
.g-wide--push-#{$i} {
|
||||
margin-left: ($wideColWidth*$i) + ($wideGutterWidth*$i);
|
||||
}
|
||||
.g-wide--pull-#{$i} {
|
||||
margin-right: ($wideColWidth*$i) + ($wideGutterWidth*$i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-wide--last { margin-right: 0; }
|
||||
|
||||
.g-wide--full {
|
||||
@include rule--col(wide);
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.g--third {
|
||||
@include rule--col(wide);
|
||||
width: 30.8%;
|
||||
}
|
||||
|
||||
.g--half,
|
||||
.g-wide--half {
|
||||
@include rule--col(wide);
|
||||
width: 50% - $wideGutterWidth/2;
|
||||
}
|
||||
|
||||
.g--pull-half { margin-right: 50% + $wideGutterWidth/2; }
|
||||
}
|
||||
|
||||
|
||||
// This is a global 'last' class
|
||||
// to be used with global grid classes, such as 'half' or 'third'
|
||||
// Example usage:
|
||||
// <div class="third"></div>
|
||||
// <div class="third"></div>
|
||||
// <div class="third last"></div>
|
||||
.g--last { margin-right: 0; }
|
||||
|
||||
|
||||
// This is a global 'centered' class
|
||||
.g--centered {
|
||||
float: none; // reset float to none so we can center it
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// This is a grid overlay
|
||||
// Its purpose is to show users our grid system
|
||||
// It becomes visible when a class 'debug' is added to the body
|
||||
.grid-overlay {
|
||||
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
|
||||
// Only show when parents (body) has debug class
|
||||
.debug & {
|
||||
@include container(true);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
[class*="g-"] {
|
||||
height: 100%;
|
||||
background-color: rgba(lighten(#000, 35%), .2);
|
||||
}
|
||||
|
||||
@include medium-only {
|
||||
.g-wide--last {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include small-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Guides List
|
||||
*
|
||||
**/
|
||||
|
||||
|
||||
.guides-list {
|
||||
overflow: hidden;
|
||||
|
||||
@include medium {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding-top: $lineHeight*2;
|
||||
}
|
||||
}
|
||||
|
||||
.guides-list__item {
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
margin-top: $lineHeight;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include medium {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $lineHeight 32px 0;
|
||||
}
|
||||
|
||||
.primary-content {
|
||||
@include medium {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-content {
|
||||
position: relative;
|
||||
// background: #f5f5f5;
|
||||
margin-top: ($lineHeight*2) - 1;
|
||||
border-top: 1px solid $colorGrayKeyline;
|
||||
|
||||
@include medium {
|
||||
width: 100%; // needed due to parent being flex
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
position: absolute;
|
||||
top: -$lineHeight - 2;
|
||||
left: 50%;
|
||||
margin-left: -21px;
|
||||
border: 2px solid #ffffff;
|
||||
|
||||
& i {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: $lineHeight 0 0;
|
||||
padding: $lineHeight*2 0 $lineHeight*2;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Icon Circle
|
||||
*
|
||||
**/
|
||||
|
||||
.icon-circle,
|
||||
.icon-circle--large {
|
||||
height: 0;
|
||||
width: 0;
|
||||
background: $colorGray;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
font-size: 0;
|
||||
padding: 22px; // Breaks baseline grid
|
||||
margin: 4px auto; // Adds margin top/bottom to fix baseline grid ;)
|
||||
|
||||
i,
|
||||
span {
|
||||
position: absolute;
|
||||
line-height: 0px;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: $fontLarge;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $fontHighlight;
|
||||
font-size: $fontLarge;
|
||||
font-weight: 700;
|
||||
|
||||
@include medium {
|
||||
font-size: $fontXLarge;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-circle--large {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: $lineHeight;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
font-size: $fontLarge;
|
||||
|
||||
@include medium {
|
||||
font-size: $fontXLarge;
|
||||
}
|
||||
}
|
||||
|
||||
@include medium {
|
||||
padding: ($lineHeight + $lineHeight/2) - 2;
|
||||
border: 2px solid #ffffff;
|
||||
|
||||
a & {
|
||||
padding: ($lineHeight + $lineHeight/2) - 1;
|
||||
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(#ffffff, .42);
|
||||
border: 1px solid;
|
||||
|
||||
// demo transition
|
||||
transition: all 100ms linear;
|
||||
transform: translateZ(0); // kick in hardware acceleration
|
||||
}
|
||||
|
||||
.no-touch a:hover & {
|
||||
box-shadow: inset 0px 0px 0px 1px #ffffff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon-circle--nav {
|
||||
height: 0;
|
||||
width: 0;
|
||||
background: $colorGray;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
font-size: 0;
|
||||
padding: $lineHeight/2;
|
||||
margin: 0 auto;
|
||||
|
||||
@include medium {
|
||||
padding: 22px; // Breaks baseline grid
|
||||
margin-top: 4px; // Adds margin top/bottom to fix baseline grid ;)
|
||||
margin-bottom: 4px; // Adds margin top/bottom to fix baseline grid ;)
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
line-height: 1px;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: $fontBase;
|
||||
|
||||
@include medium {
|
||||
font-size: $fontLarge;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
@font-face {
|
||||
font-family: icons;
|
||||
src: url(../images/icons/icons.eot);
|
||||
src: url(../images/icons/icons.eot?#iefix) format('embedded-opentype'),
|
||||
url(../images/icons/icons.woff2) format('woff2'),
|
||||
url(../images/icons/icons.woff) format('woff'),
|
||||
url(../images/icons/icons.ttf) format('truetype'),
|
||||
url(../images/icons/icons.svg?#icons) format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: 'icons';
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
speak: none;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Icons
|
||||
$icon-bullet: '\e001';
|
||||
.icon-bullet::before {
|
||||
content:"\e001";
|
||||
}
|
||||
|
||||
$icon-chevron-down: '\e002';
|
||||
.icon-chevron-down::before {
|
||||
content: '\e002';
|
||||
}
|
||||
|
||||
$icon-chevron-large: '\e003';
|
||||
.icon-chevron-large::before {
|
||||
content: '\e003';
|
||||
}
|
||||
|
||||
$icon-chevron-left: '\e004';
|
||||
.icon-chevron-left::before {
|
||||
content: '\e004';
|
||||
}
|
||||
|
||||
$icon-chevron-right: '\e005';
|
||||
.icon-chevron-right::before {
|
||||
content: '\e005';
|
||||
}
|
||||
|
||||
$icon-chevron-up: '\e006';
|
||||
.icon-chevron-up::before {
|
||||
content: '\e006';
|
||||
}
|
||||
|
||||
$icon-close: '\e007';
|
||||
.icon-close::before {
|
||||
content: '\e007';
|
||||
}
|
||||
|
||||
$icon-cog: '\e008';
|
||||
.icon-cog::before {
|
||||
content: '\e008';
|
||||
}
|
||||
|
||||
$icon-diamond: '\e009';
|
||||
.icon-diamond::before {
|
||||
content: '\e009';
|
||||
}
|
||||
|
||||
$icon-exclamation: '\e00a';
|
||||
.icon-exclamation::before {
|
||||
content: '\e00a';
|
||||
}
|
||||
|
||||
$icon-google-dev: '\e00b';
|
||||
.icon-google-dev::before {
|
||||
content: '\e00b';
|
||||
}
|
||||
|
||||
$icon-hash: '\e00c';
|
||||
.icon-hash::before {
|
||||
content: '\e00c';
|
||||
}
|
||||
|
||||
$icon-introduction-to-media: '\e00d';
|
||||
.icon-introduction-to-media::before {
|
||||
content: '\e00d';
|
||||
}
|
||||
|
||||
$icon-lessons: '\e00e';
|
||||
.icon-lessons::before {
|
||||
content: '\e00e';
|
||||
}
|
||||
|
||||
$icon-menu: '\e00f';
|
||||
.icon-menu::before {
|
||||
content: '\e00f';
|
||||
}
|
||||
|
||||
$icon-minus: '\e010';
|
||||
.icon-minus::before {
|
||||
content: '\e010';
|
||||
}
|
||||
|
||||
$icon-multi-device-layouts: '\e011';
|
||||
.icon-multi-device-layouts::before {
|
||||
content: '\e011';
|
||||
}
|
||||
|
||||
$icon-performance: '\e012';
|
||||
.icon-performance::before {
|
||||
content: '\e012';
|
||||
}
|
||||
|
||||
$icon-plus: '\e013';
|
||||
.icon-plus::before {
|
||||
content: '\e013';
|
||||
}
|
||||
|
||||
$icon-question: '\e014';
|
||||
.icon-question::before {
|
||||
content: '\e014';
|
||||
}
|
||||
|
||||
$icon-slash: '\e015';
|
||||
.icon-slash::before {
|
||||
content: '\e015';
|
||||
}
|
||||
|
||||
$icon-star: '\e016';
|
||||
.icon-star::before {
|
||||
content: '\e016';
|
||||
}
|
||||
|
||||
$icon-tick: '\e017';
|
||||
.icon-tick::before {
|
||||
content: '\e017';
|
||||
}
|
||||
|
||||
$icon-user-input: '\e018';
|
||||
.icon-user-input::before {
|
||||
content: '\e018';
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Link
|
||||
*
|
||||
**/
|
||||
|
||||
a {
|
||||
color: $colorBlue;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cta--primary {
|
||||
@include style-cta($colorBlue, $icon-chevron-right);
|
||||
}
|
||||
|
||||
.cta--secondary {
|
||||
@include style-cta($colorBlue);
|
||||
}
|
||||
|
|
@ -1,336 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* List
|
||||
*
|
||||
**/
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
@include small-only {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
@include bullet-type("", icon-bullet);
|
||||
|
||||
&::before {
|
||||
font-size: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: list;
|
||||
> li {
|
||||
@include numbered-list;
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
|
||||
// This selected every adjacent <li>
|
||||
// from the 10th and overrides the
|
||||
// content property of each
|
||||
&:nth-child(10n) ~ li::before,
|
||||
&:nth-child(10n)::before {
|
||||
content: counter(list);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ul ol,
|
||||
ol ul {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*========== LIST LINKS ==========*/
|
||||
|
||||
ul.list-links {
|
||||
li::before {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
@include bullet-type("", icon-bullet);
|
||||
|
||||
&::before {
|
||||
font-size: 4px;
|
||||
}
|
||||
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.list-links--primary {
|
||||
a {
|
||||
@include bullet-type("", icon-chevron-right);
|
||||
font-weight: 400;
|
||||
font-family: $fontHighlight;
|
||||
line-height: 1; // fixes baseline grid alignment
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol.list-links {
|
||||
li {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
@include numbered-list;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&:nth-child(10n) ~ li a::before,
|
||||
&:nth-child(10n) a::before {
|
||||
content: counter(list);
|
||||
}
|
||||
}
|
||||
|
||||
&.list-links--secondary {
|
||||
a::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-links--secondary {
|
||||
@include type--base;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*========== ANCHOR LIST ==========*/
|
||||
|
||||
.list-anchor {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
@include type--base;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
&::before {
|
||||
display: none
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
@include bullet-type("", icon-bullet);
|
||||
line-height: 1; // fixes baseline grid alignment
|
||||
display: inline-block;
|
||||
padding-left: 16px;
|
||||
|
||||
&::before {
|
||||
font-size: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*========== SMALL LIST ==========*/
|
||||
|
||||
.list-small {
|
||||
|
||||
li {
|
||||
@include medium {
|
||||
@include type--small;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*========== CENTERED LIST ==========*/
|
||||
|
||||
.list-centered {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/*========== FEATURED LIST ==========*/
|
||||
|
||||
.featured-list {
|
||||
padding-top: $lineHeight * 3;
|
||||
padding-bottom: $lineHeight * 3;
|
||||
}
|
||||
|
||||
.featured-list__item {
|
||||
background: #ffffff;
|
||||
padding-left: 0;
|
||||
padding-top: $lineHeight;
|
||||
padding-bottom: $lineHeight;
|
||||
|
||||
@include medium {
|
||||
min-height: $lineHeight * 13;
|
||||
padding: $lineHeight * 2 32px;
|
||||
}
|
||||
|
||||
margin-top: $lineHeight;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-list__img-wrapper {
|
||||
display: none;
|
||||
position: relative;
|
||||
padding-top: $lineHeight;
|
||||
margin: 0 -5%;
|
||||
|
||||
@include medium {
|
||||
display: block;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-list__img {
|
||||
@include medium {
|
||||
padding-top: 60.8%;
|
||||
padding-bottom: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
|
||||
@include medium {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*========== RELATED GUIDES LIST ==========*/
|
||||
.related-guides-list {
|
||||
font-family: $fontHighlight;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
@include medium {
|
||||
padding-top: $lineHeight
|
||||
}
|
||||
|
||||
@include wide {
|
||||
padding-top: 0
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-top: $lineHeight;
|
||||
padding-bottom: $lineHeight - 1;
|
||||
border-bottom: 1px solid $colorGrayKeyline;
|
||||
|
||||
&:last-child {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*========== LIST RESET ==========*/
|
||||
|
||||
.list--reset {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.list-links a::before,
|
||||
& li::before {
|
||||
display: none !important; // Fine to use !important when we are forcing an override
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========== LESSONS ==========*/
|
||||
.list-lessons {
|
||||
padding-left: 0;
|
||||
|
||||
& a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
& .current {
|
||||
&,
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
& .icon {
|
||||
font-size: $fontSmall;
|
||||
display: inline-block;
|
||||
background: rgba(#000000, .2);
|
||||
border-radius: 100%;
|
||||
width: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*========== GUIDES INTO - used on homepage ==========*/
|
||||
.list-guides-intro {
|
||||
margin-bottom: $lineHeight*2;
|
||||
|
||||
@include small-only {
|
||||
padding-top: $lineHeight*2;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid $colorGrayKeyline;
|
||||
padding-bottom: ($lineHeight*2) - 1;
|
||||
margin-bottom: ($lineHeight*2);
|
||||
|
||||
@include medium {
|
||||
border-color: transparent;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: transparent;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Media - imgs/videos
|
||||
*
|
||||
**/
|
||||
|
||||
img,
|
||||
video,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
.content & {
|
||||
margin-top: $lineHeight;
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* subsection__title
|
||||
*
|
||||
**/
|
||||
|
||||
.subsection-title {
|
||||
color: $colorGrayDark;
|
||||
margin-top: $lineHeight * 2;
|
||||
}
|
||||
|
||||
.subsection-number {
|
||||
@include type--base;
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Table
|
||||
*
|
||||
**/
|
||||
|
||||
table {
|
||||
margin-top: $lineHeight;
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
background: $colorBlue;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: center;
|
||||
display: none;
|
||||
font-family: $fontHighlight;
|
||||
@include type--medium;
|
||||
}
|
||||
|
||||
tr {
|
||||
@include medium {
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
background: $colorGrayBackground;
|
||||
}
|
||||
|
||||
td {
|
||||
display: block;
|
||||
padding-top: $lineHeight/2;
|
||||
padding-bottom: $lineHeight/2;
|
||||
|
||||
// This is to re-plicate the table-headers for mobile
|
||||
&::before {
|
||||
content: attr(data-th) " :";
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
background: $colorBlue;
|
||||
border-right: 2px solid #ffffff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100px;
|
||||
max-height: 100%;
|
||||
font-family: $fontHighlight;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding-left: $lineHeight/2;
|
||||
padding-top: $lineHeight/2;
|
||||
|
||||
@include medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
position: relative;
|
||||
padding-left: 140px;
|
||||
|
||||
@include medium {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
@include medium {
|
||||
padding: $lineHeight;
|
||||
padding-top: 13px;
|
||||
padding-bottom: $lineHeight/2 - 1;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
@include medium {
|
||||
padding: $lineHeight;
|
||||
padding-bottom: $lineHeight - 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td:last-child::after {
|
||||
content: "";
|
||||
display: block;
|
||||
background: #ffffff;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
@include medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-2 {
|
||||
col {
|
||||
width: $mediumContainer / 2;
|
||||
@include wide {
|
||||
width: $wideContainer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
@include medium {
|
||||
&:first-child {
|
||||
border-right: 2px solid #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-3 {
|
||||
col {
|
||||
width: $mediumContainer / 3;
|
||||
@include wide {
|
||||
width: $wideContainer / 3;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
@include medium {
|
||||
&:nth-child(2) {
|
||||
border-left: 2px solid #ffffff;
|
||||
border-right: 2px solid #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-4 {
|
||||
col {
|
||||
width: $mediumContainer / 4;
|
||||
@include wide {
|
||||
width: $wideContainer / 4;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
@include medium {
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
border-left: 2px solid #ffffff;
|
||||
border-right: 2px solid #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Typography
|
||||
*
|
||||
**/
|
||||
|
||||
// Just normalizing text
|
||||
// Recommend using padding instead of margin
|
||||
h1, h2, h3, h4, h5, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Definitions
|
||||
.small,
|
||||
small {
|
||||
@include type--small;
|
||||
}
|
||||
|
||||
.base,
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
@include type--base;
|
||||
}
|
||||
|
||||
.medium,
|
||||
h4 {
|
||||
@include type--medium;
|
||||
}
|
||||
|
||||
.large,
|
||||
h3 {
|
||||
@include type--large;
|
||||
}
|
||||
.xlarge,
|
||||
h2 {
|
||||
@include type--xlarge;
|
||||
}
|
||||
|
||||
.xxlarge,
|
||||
h1 {
|
||||
@include type--xxlarge;
|
||||
}
|
||||
|
||||
.huge {
|
||||
@include type--huge;
|
||||
}
|
||||
|
||||
|
||||
li > p {
|
||||
padding-top: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue