Remove unused SASS files
This commit is contained in:
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 a new issue