Remove some unused sass
First round of tidy up - removing the totally unused components. I think these are all fundamentals specific, and should be safe to remove.master
Ian Barber
parent
3d6ff3b99c
commit
b5f8977bdd
|
|
@ -1,66 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Beta banner
|
||||
*
|
||||
**/
|
||||
|
||||
.beta {
|
||||
font-family: $fontHighlight;
|
||||
padding: $lineHeight/2 40px $lineHeight/2 $lineHeight/2;
|
||||
line-height: 19px;
|
||||
margin-left: -5%;
|
||||
margin-right: $lineHeight/2;
|
||||
margin-top: 0;
|
||||
background: $colorWarning;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
|
||||
&:before {
|
||||
content: $icon-diamond;
|
||||
font-family: $fontIcon;
|
||||
font-size: 64px;
|
||||
line-height: 0px;
|
||||
color: $colorYellow;
|
||||
|
||||
position: absolute;
|
||||
right: -32px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: $fontIcon;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
width: 64px;
|
||||
right: -32px;
|
||||
text-align: center;
|
||||
line-height: 0px;
|
||||
top: 50%;
|
||||
display: block;
|
||||
|
||||
-webkit-animation: cog 4000ms ease-in-out;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
float: right;
|
||||
margin-top: 18px;
|
||||
padding-left: 32px;
|
||||
padding-right: (32px) + 26;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: $colorText;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cog {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(1079deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.gc-content-license {
|
||||
border-top: 2px solid $colorGrayKeyline;
|
||||
margin-top: ($lineHeight*3) - 2;
|
||||
margin-bottom: $lineHeight*4;
|
||||
|
||||
& p {
|
||||
@include type--small;
|
||||
padding-top: $lineHeight;
|
||||
}
|
||||
|
||||
@include wide {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Google Developers footer bar
|
||||
*
|
||||
**/
|
||||
|
||||
|
||||
#gc-footer {
|
||||
font-size: $fontSmall;
|
||||
background: $colorGrayDark;
|
||||
font-weight: 400;
|
||||
|
||||
padding: 26px 0 52px;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
|
||||
& ul {
|
||||
margin: 0 0 0 52px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& li {
|
||||
padding-left: 0;
|
||||
|
||||
@include medium {
|
||||
margin-right: 30px;
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
& a {
|
||||
color: $colorGrayKeyline;
|
||||
font-size: $fontBase;
|
||||
display: block;
|
||||
|
||||
@include medium {
|
||||
font-size: $fontSmall;
|
||||
}
|
||||
}
|
||||
|
||||
&:before { display:none; }
|
||||
}
|
||||
|
||||
& img {
|
||||
vertical-align: center;
|
||||
float: left;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Google Developers header bar
|
||||
*
|
||||
**/
|
||||
|
||||
#gc-googlebar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #f1f1f1;
|
||||
margin: 0;
|
||||
padding: 0 0 $lineHeight;
|
||||
|
||||
@include medium {
|
||||
height: $lineHeight * 4;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#gc-logo {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin: $lineHeight auto;
|
||||
width: 43px;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
|
||||
@include medium {
|
||||
float: left;
|
||||
margin-top: 29px;
|
||||
width: 56px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 158px;
|
||||
height: 39px;
|
||||
max-width: none;
|
||||
|
||||
@include medium {
|
||||
width: 210px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Home header
|
||||
*
|
||||
**/
|
||||
|
||||
.home-header {
|
||||
background: $colorBlue url(../imgs/devices.svg) no-repeat center center;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
padding-bottom: $lineHeight*3;
|
||||
margin-bottom: $lineHeight*3;
|
||||
|
||||
@include medium {
|
||||
padding-bottom: $lineHeight*4;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include wide {
|
||||
-webkit-background-size: contain;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@extend .icon-star:before;
|
||||
font-family: $fontIcon;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
font-size: 50px;
|
||||
bottom: -10px;
|
||||
|
||||
@include medium {
|
||||
font-size: $fontXXLarge;
|
||||
line-height: 1px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
font-weight: 500;
|
||||
color: $colorBlueSecondary;
|
||||
}
|
||||
|
||||
|
||||
& h1 {
|
||||
@include type--huge;
|
||||
|
||||
@include small-only {
|
||||
@include type--xlarge(true);
|
||||
}
|
||||
|
||||
padding-top: $lineHeight*2;
|
||||
|
||||
@include medium {
|
||||
padding-top: $lineHeight*3;
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
@include type--large;
|
||||
|
||||
@include medium {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
margin-top: $lineHeight*2 + $lineHeight/2;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Main Footer
|
||||
*
|
||||
**/
|
||||
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Main Header
|
||||
*
|
||||
**/
|
||||
|
||||
.main-header {
|
||||
background: $colorGrayDark;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.main-header__title {
|
||||
@include container(true);
|
||||
|
||||
@include type--large;
|
||||
padding-top: $lineHeight/2;
|
||||
padding-bottom: $lineHeight/2;
|
||||
|
||||
@include small-only {
|
||||
box-shadow: 0 2px 0 0 $colorGrayBackground;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header__logo {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
|
@ -1,330 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Main Navigation
|
||||
*
|
||||
**/
|
||||
|
||||
.main-nav {
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
|
||||
@include medium {
|
||||
background-color: $colorGrayDark;
|
||||
box-shadow: 0 2px 0 0 $colorGrayBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include small-only {
|
||||
.js & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.js &.nav-is-opened {
|
||||
display: block;
|
||||
-webkit-animation: showNav 400ms both;
|
||||
}
|
||||
}
|
||||
|
||||
@include medium {
|
||||
text-align: center;
|
||||
@include container(true);
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav__item {
|
||||
list-style: none;
|
||||
display: block;
|
||||
background-color: $colorGrayBackground;
|
||||
position: static;
|
||||
padding-left: 0;
|
||||
|
||||
|
||||
@include small-only {
|
||||
&.main-nav__item--home {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.subnav-is-opened {
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@include medium {
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the padding-top apart from first-child
|
||||
&:first-child ~ .main-nav__item {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Remove list styles
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav__link {
|
||||
color: $colorGrayDark;
|
||||
font-family: $fontHighlight;
|
||||
@include type--large;
|
||||
margin-bottom: 1px;
|
||||
text-decoration: none;
|
||||
|
||||
display: block;
|
||||
|
||||
padding-top: $lineHeight/2;
|
||||
padding-bottom: ($lineHeight/2) - 1;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include small-only {
|
||||
@include container(true);
|
||||
}
|
||||
|
||||
@include medium {
|
||||
margin-bottom: 0;
|
||||
color: #ffffff;
|
||||
@include type--medium;
|
||||
padding: $lineHeight $lineHeight/2 $lineHeight;
|
||||
font-weight: 400;
|
||||
|
||||
.main-nav__item--home & {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $colorYellowSecondary;
|
||||
// box-shadow: 0 0 1px 0 $colorGray;
|
||||
}
|
||||
|
||||
.subnav-is-opened > & {
|
||||
color: $colorYellow;
|
||||
}
|
||||
}
|
||||
|
||||
@include wide {
|
||||
padding-bottom: $lineHeight;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main-nav__list--child {
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.main-nav__item--child {
|
||||
padding-top: 0;
|
||||
position: static;
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav__link--child {
|
||||
background: #ffffff;
|
||||
@include type--base;
|
||||
padding-top: $lineHeight/2;
|
||||
padding-bottom: ($lineHeight/2) - 1;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid $colorGrayKeyline;
|
||||
|
||||
@include small-only {
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
color: $colorText;
|
||||
border-bottom-color: transparent;
|
||||
padding-left: 0;
|
||||
|
||||
// Only override links inside list
|
||||
.main-nav__list--child & {
|
||||
@include type--large;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $colorGrayDark;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-nav__secondary-nav {
|
||||
display: none;
|
||||
|
||||
@include medium {
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: 2px solid $colorGrayDark;
|
||||
padding-bottom: ($lineHeight*2) - 2; // remove the 2px border from the padding
|
||||
color: $colorText;
|
||||
|
||||
}
|
||||
|
||||
.subnav-is-opened & {
|
||||
display: block;
|
||||
-webkit-animation: showNav 400ms both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-nav__secondary-content {
|
||||
@include medium {
|
||||
@include container(true);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav__link--explore {
|
||||
@include style-cta($colorBlue, false);
|
||||
display: block;
|
||||
line-height: $lineHeight;
|
||||
|
||||
@include small-only {
|
||||
border-top: 1px solid $colorGrayKeyline;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
@include style-cta($colorBlue, $icon-chevron-right);
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav__link--explore-wrapper {
|
||||
border-bottom: 1px solid $colorGrayKeyline;
|
||||
}
|
||||
|
||||
.main-nav__featured {
|
||||
display: none;
|
||||
|
||||
@include medium {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav__featured-text {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.main-nav__btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5%;
|
||||
margin: -36px 0 0;
|
||||
line-height: 1;
|
||||
|
||||
font-size: $fontLarge;
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
padding: 0;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
|
||||
@include medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-is-opened + .main-nav__btn {
|
||||
top: -6px;
|
||||
|
||||
& i:before {
|
||||
font-size: $fontMedium;
|
||||
content: $icon-close;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========== ICONS ==========*/
|
||||
.main-nav__icon {
|
||||
float: right;
|
||||
font-size: $fontBase;
|
||||
line-height: $lineHeight;
|
||||
vertical-align: middle;
|
||||
|
||||
.main-nav__secondary-nav & {
|
||||
font-size: $fontSmall;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
display: none;
|
||||
font-size: $fontSmall;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-custom {
|
||||
&:before {
|
||||
@extend .icon-plus:before;
|
||||
|
||||
@include medium {
|
||||
content: $icon-chevron-down;
|
||||
}
|
||||
}
|
||||
|
||||
@include medium {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
vertical-align: top; // middle breaks baseline grid
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.subnav-is-opened & {
|
||||
&:before {
|
||||
@extend .icon-minus:before;
|
||||
|
||||
@include medium {
|
||||
content: $icon-chevron-up;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapping in .main-nav due to specicifity
|
||||
.main-nav {
|
||||
.main-nav__guide-icon {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 6px;
|
||||
|
||||
@include medium {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*========== CSS ANIMATION ==========*/
|
||||
@-webkit-keyframes showNav {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -13,9 +13,6 @@
|
|||
@import "_components/_icons";
|
||||
|
||||
// Modules
|
||||
@import "_modules/_main-navigation";
|
||||
@import "_modules/_main-header";
|
||||
@import "_modules/_main-footer";
|
||||
@import "_modules/_highlight";
|
||||
@import "_modules/_editorial-header";
|
||||
@import "_modules/_summary-header";
|
||||
|
|
@ -28,14 +25,9 @@
|
|||
@import "_modules/_featured-spotlight";
|
||||
@import "_modules/_quote";
|
||||
@import "_modules/_article-nav";
|
||||
@import "_modules/_home-header";
|
||||
@import "_modules/_did-you-know";
|
||||
@import "_modules/_toc";
|
||||
@import "_modules/_next-lessons";
|
||||
@import "_modules/_beta";
|
||||
@import "_modules/_cc";
|
||||
@import "_modules/_google-header";
|
||||
@import "_modules/_google-footer";
|
||||
|
||||
// Components
|
||||
@import "_components/_grid";
|
||||
|
|
|
|||
Loading…
Reference in New Issue