honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(docs-infra): change typography font sizes to be rem based (#31118) 

PR Close #31118
This commit is contained in:
Stefanie Fluin 2019-06-18 13:36:02 -07:00 committed by Kara Erickson
parent 7035f225ad
commit 65974154e2
25 changed files with 162 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
aio/src/styles/0-base/_typography.scss
View File

@ -1,8 +1,12 @@
html {
font-size: 62.5%;
}
body {
font-family: $main-font;
margin: 0;
color: $darkgray;
font-size: 14px;
@include font-size(14);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@ -12,9 +16,9 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
display: inline-block;
font-size: 24px;
@include font-size(24);
font-weight: 500;
display: inline-block;
margin: 8px 0px;
@media screen and (max-width: 600px) {
@ -23,37 +27,37 @@ h1 {
}
h2 {
font-size: 22px;
@include font-size(22);
font-weight: 500;
margin: 32px 0px 24px;
clear: both;
}
h3 {
font-size: 20px;
@include font-size(20);
font-weight: 400;
margin: 24px 0px 12px;
clear: both;
}
h4 {
font-size: 18px;
@include font-size(18);
font-weight: 400;
margin: 8px 0px;
clear: both;
}
h5 {
font-size: 16px;
@include font-size(16);
font-weight: 500;
margin: 8px 0px;
clear: both;
}
h6 {
color: $mediumgray;
font-size: 16px;
@include font-size(16);
font-weight: 500;
color: $mediumgray;
margin: 8px 0px;
clear: both;
}
@ -83,13 +87,13 @@ ol,
li,
input,
a {
font-size: 14px;
line-height: 24px;
letter-spacing: 0.3px;
@include font-size(14);
@include line-height(24);
@include letter-spacing(0.3);
font-weight: 400;
color: $darkgray;
& > em {
letter-spacing: 0.3px;
@include letter-spacing(0.3);
}
}
@ -129,7 +133,7 @@ a {
}
.app-toolbar a {
font-size: 16px;
@include font-size(16);
font-weight: 400;
color: $white;
font-family: $main-font;
@ -157,7 +161,7 @@ table tbody th {
td {
font-weight: 400;
padding: 8px 30px;
letter-spacing: 0.3px;
@include letter-spacing(0.3);
> p,
ul {
@ -171,7 +175,7 @@ td {
}
th {
font-size: 16px;
@include font-size(16);
font-weight: 500;
padding: 13px 32px;
text-align: left;

16
aio/src/styles/1-layouts/_footer.scss
View File

@ -1,6 +1,6 @@
footer {
position: relative;
line-height: 24px;
@include line-height(24);
flex: 1;
padding: 48px;
z-index: 0;
@ -37,7 +37,7 @@ footer {
cursor: pointer;
}
h3 {
font-size: 16px;
@include font-size(16);
text-transform: uppercase;
font-weight: 400;
margin: 0 0 16px;
@ -82,23 +82,15 @@ footer {
}
}
@media (max-width: 700px) {
h3 {
font-size: 110%;
}
}
@media (max-width: 600px) {
h3 {
font-size: 100%;
@include font-size(14);
}
}
}
footer::after {
content: "";
content: '';
position: absolute;
z-index: -1;
top: 0;

28
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -22,9 +22,9 @@
.hero-title {
display: inline-block;
font-size: 28px;
@include font-size(28);
font-weight: 400;
line-height: 48px;
@include line-height(48);
margin: 0 8px 0 0;
text-transform: uppercase;
@ -76,8 +76,8 @@ section#intro {
}
.hero-headline {
font-size: 40px;
line-height: 64px;
@include font-size(40);
@include line-height(64);
font-weight: 500;
margin: 32px 0;
@ -90,8 +90,8 @@ section#intro {
}
@media (max-width: 575px) {
font-size: 32px;
line-height: 50px;
@include font-size(32);
@include line-height(50);
}
}
@ -154,7 +154,7 @@ section#intro {
align-items: center;
height: 40px;
min-width: 160px;
font-size: 16px;
@include font-size(16);
color: $white;
background-color: $blue;
border-radius: 48px;
@ -172,11 +172,11 @@ section#intro {
right: 0;
position: static;
transition: all 0.3s ease-in;
font-size: 16px;
@include font-size(16);
}
p {
font-size: 16px;
@include font-size(16);
margin: 8px;
text-align: center;
}
@ -252,9 +252,9 @@ section#intro {
width: 184px;
height: 40px;
padding: 0 24px;
font-size: 18px;
@include font-size(18);
font-weight: 600;
line-height: 40px;
@include line-height(40);
background-color: $white;
border-radius: 48px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
@ -325,7 +325,7 @@ aio-shell {
}
.text-headline {
font-size: 20px;
@include font-size(20);
font-weight: 500;
color: $blue;
margin-top: 10px;
@ -424,7 +424,7 @@ div[layout=row]{
.banner-headline {
text-transform: uppercase;
font-size: 24px;
@include font-size(24);
font-weight: 300;
color: $white;
margin: 0;
@ -432,7 +432,7 @@ div[layout=row]{
-webkit-margin-after: 0;
@media (max-width: 600px) {
font-size: 18px;
@include font-size(18);
font-weight: 400;
}

6
aio/src/styles/1-layouts/_not-found.scss
View File

@ -13,8 +13,8 @@
flex-direction: column;
h1 {
font-size: 48px;
color: $blue;
@include font-size(48);
color: $blue;
text-transform: uppercase;
margin: 8px 0;
}
@ -22,6 +22,6 @@
.nf-icon.material-icons {
color: $blue;
font-size: 100px;
@include font-size(100);
position: static;
}

10
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -6,7 +6,7 @@
aio-nav-menu {
display: block;
margin: 0 auto;
font-size: 13px;
@include font-size(13);
ul, a {
padding: 0;
margin: 0;
@ -137,7 +137,7 @@ button.vertical-menu-item {
.level-1 {
font-family: $main-font;
font-size: 14px;
@include font-size(14);
font-weight: 400;
margin-left: 14px;
transition: background-color 0.2s;
@ -147,7 +147,7 @@ button.vertical-menu-item {
.level-2 {
color: $mediumgray;
font-family: $main-font;
font-size: 14px;
@include font-size(14);
font-weight: 400;
margin-left: 12px;
text-transform: none;
@ -156,7 +156,7 @@ button.vertical-menu-item {
.level-3 {
color: $mediumgray;
font-family: $main-font;
font-size: 14px;
@include font-size(14);
margin-left: 10px;
}
@ -195,7 +195,7 @@ mat-sidenav .doc-version {
option {
font-family: $main-font;
font-size: 14px;
@include font-size(14);
}
}
}

2
aio/src/styles/2-modules/_alert.scss
View File

@ -1,7 +1,7 @@
.alert {
padding: 16px;
margin: 24px 0px;
font-size: 14px;
@include font-size(14);
color: $darkgray;
width: 100%;
box-sizing: border-box;

52
aio/src/styles/2-modules/_api-list.scss
View File

@ -70,29 +70,25 @@ aio-api-list {
box-sizing: border-box;
border: 1px solid $white;
color: $blue-600;
font-size: 16px;
@include font-size(16);
height: 32px;
line-height: 32px;
@include line-height(32);
outline: none;
padding: 0 16px 0 32px;
transition: all .2s;
// PLACEHOLDER TEXT
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
&::-webkit-input-placeholder,
&::-moz-placeholder,
&::-ms-input-placeholder,
&:-moz-placeholder {
/* Chrome/Opera/Safari */
/* Firefox 19+ */
/* IE 10+ */
/* Firefox 18- */
color: $blue-grey-100;
font-size: 14px;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $blue-grey-100;
font-size: 14px;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $blue-grey-100;
font-size: 14px;
}
&:-moz-placeholder { /* Firefox 18- */
color: $blue-grey-100;
font-size: 14px;
@include font-size(14);
}
&:focus {
@ -103,7 +99,7 @@ aio-api-list {
.material-icons {
color: $blue-grey-100;
font-size: 20px;
@include font-size(20);
left: 8px;
position: absolute;
top: 6px;
@ -120,9 +116,9 @@ aio-api-list {
box-shadow: 0 1px 2px rgba($black, .24);
color: $white;
display: inline-block;
font-size: 10px;
@include font-size(10);
font-weight: 600;
line-height: 16px;
@include line-height(16);
text-align: center;
width: 16px;
@ -170,9 +166,9 @@ aio-api-list {
}
li {
font-size: 14px;
@include font-size(14);
margin: 8px 0;
line-height: 14px;
@include line-height(14);
padding: 0;
float: left;
width: 33%;
@ -187,7 +183,7 @@ aio-api-list {
a {
color: $blue-grey-600;
display: inline-block;
line-height: 16px;
@include line-height(16);
padding: 0 16px 0;
text-decoration: none;
transition: all .3s;
@ -208,8 +204,8 @@ aio-api-list {
.docs-content .h2-api-docs,
.docs-content .h2-api-docs:first-of-type {
font-size: 18px;
line-height: 24px;
@include font-size(18);
@include line-height(24);
margin-top: 0;
}
@ -251,7 +247,7 @@ p {
.row-margin {
margin-bottom: 36px;
h2 {
line-height: 28px;
@include line-height(28);
}
}
@ -292,7 +288,7 @@ p {
}
.api-doc-code {
font-size: 14px;
@include font-size(14);
color: #1a2326;
// the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
@ -314,11 +310,11 @@ p {
}
.api-doc-code {
font-size: 12px;
@include font-size(12);
}
p.location-badge {
position: relative;
font-size: 11px;
@include font-size(11);
}
}

16
aio/src/styles/2-modules/_api-pages.scss
View File

@ -6,7 +6,7 @@
th {
text-transform: none;
font-size: 16px;
@include font-size(16);
font-weight: bold;
}
@ -52,7 +52,7 @@
&.parameters-table {
margin-top: 0;
font-size: 14px;
@include font-size(14);
box-shadow: none;
tr {
@ -120,7 +120,7 @@
.material-icons {
border-radius: 4px;
padding: 4px;
font-size: 20px;
@include font-size(20);
&:hover {
background-color: $mist;
}
@ -166,7 +166,7 @@
}
h4 {
font-size: 14px;
@include font-size(14);
font-weight: bold;
margin-top: 12px;
}
@ -175,12 +175,12 @@
.api-heading {
padding: 5px 0;
font-size: 14px;
@include font-size(14);
}
.parameters-table {
margin-top: 0;
font-size: 14px;
@include font-size(14);
td:nth-child(1) {
width: 20%;
}
@ -245,9 +245,9 @@
.from-constructor, .read-only-property, .write-only-property {
font-size: 12px;
@include font-size(12);
font-weight: 600;
letter-spacing: 0.5px;
@include letter-spacing(0.5);
font-style: italic;
background-color: $lightgray;
border-radius: 4px;

20
aio/src/styles/2-modules/_buttons.scss
View File

@ -3,9 +3,9 @@
.button,
a.button.mat-button {
display: inline-block;
line-height: 32px;
@include line-height(32);
padding: 0px 16px;
font-size: 14px;
@include font-size(14);
font-weight: 400;
border-radius: 3px;
text-decoration: none;
@ -15,20 +15,20 @@ a.button.mat-button {
// SIZES
&.button-small {
font-size: 12px;
line-height: 24px;
@include font-size(12);
@include line-height(24);
padding: 0px 8px;
}
&.button-large {
font-size: 15px;
line-height: 48px;
@include font-size(15);
@include line-height(48);
padding: 0px 24px;
}
&.button-x-large {
font-size: 16px;
line-height: 56px;
@include font-size(16);
@include line-height(56);
padding: 0px 24px;
}
@ -85,10 +85,10 @@ a.button.mat-button {
a.filter-button {
width: 140px;
font-size: 14px;
@include font-size(14);
padding: 0px 16px;
margin: 8px;
line-height: 48px;
@include line-height(48);
border: 2px solid $blue;
border-radius: 4px;

4
aio/src/styles/2-modules/_callout.scss
View File

@ -6,7 +6,7 @@
header {
color: $white;
line-height: 24px;
@include line-height(24);
font-weight: 500;
padding: 8px 16px;
margin: 0;
@ -17,7 +17,7 @@
p {
padding: 16px;
margin: 0px;
font-size: 14px;
@include font-size(14);
}
> *:not(:first-child) {

14
aio/src/styles/2-modules/_card.scss
View File

@ -26,7 +26,7 @@
}
.card-footer {
line-height: 32px;
@include line-height(32);
padding: 8px 16px;
background-color: rgba($blue, 0.1);
color: $blue;
@ -36,8 +36,8 @@
section {
color: $deepgray;
font-size: 20px;
line-height: 24px;
@include font-size(20);
@include line-height(24);
margin: 0;
padding: 32px 0 24px;
text-transform: none;
@ -46,8 +46,8 @@
p {
color: $darkgray;
font-size: 13px;
line-height: 24px;
@include font-size(13);
@include line-height(24);
padding: 0 16px;
margin: 0;
text-align: center;
@ -57,7 +57,7 @@
bottom: 0;
border-top: 0.5px solid $lightgray;
box-sizing: border-box;
line-height: 48px;
@include line-height(48);
left: 0;
position: absolute;
right: 0;
@ -66,7 +66,7 @@
a {
color: $mediumgray;
font-size: 13px;
@include font-size(13);
}
}
.card-footer.center {

6
aio/src/styles/2-modules/_code.scss
View File

@ -51,7 +51,7 @@ code-example header {
background-color: $accentblue;
border-radius: 5px 5px 0 0;
color: $offwhite;
font-size: 16px;
@include font-size(16);
padding: 8px 16px;
}
@ -88,7 +88,7 @@ aio-code pre {
align-items: center;
code span {
line-height: 24px;
@include line-height(24);
}
}
@ -159,7 +159,7 @@ ol.linenums {
margin: 0;
font-family: $code-font;
font-size: 90%;
line-height: 24px;
@include line-height(24);
}
}

12
aio/src/styles/2-modules/_contributor.scss
View File

@ -72,7 +72,7 @@ aio-contributor {
.info-item {
color: $white;
font-size: 14px;
@include font-size(14);
font-weight: 500;
margin: 8px;
padding: 0;
@ -142,8 +142,8 @@ aio-contributor {
p {
margin: 8px 0;
font-size: 12px;
line-height: 14px;
@include font-size(12);
@include line-height(14);
text-align: left;
}
@ -172,7 +172,7 @@ aio-contributor {
}
section {
font-size: 14px;
@include font-size(14);
font-weight: 500;
padding: 8px;
margin: 0;
@ -184,8 +184,8 @@ aio-contributor {
p {
cursor: pointer;
font-size: 14px;
line-height: 18px;
@include font-size(14);
@include line-height(18);
margin: 8px 16px;
text-overflow: ellipsis;
overflow-y: auto;

2
aio/src/styles/2-modules/_details.scss
View File

@ -14,7 +14,7 @@
summary {
cursor: pointer;
font-size: 16px;
@include font-size(16);
position: relative;
padding: 16px 24px;
color: $black;

4
aio/src/styles/2-modules/_edit-page-cta.scss
View File

@ -1,10 +1,10 @@
.edit-page-cta {
font-weight: 400;
font-size: 14px;
@include font-size(14);
color: $blue;
text-align: right;
margin-right: 32px;
display: block;
position: absolute;
right: 0;
}
}

8
aio/src/styles/2-modules/_features.scss
View File

@ -12,7 +12,7 @@
}
.feature-title {
font-size: 16px;
@include font-size(16);
font-weight: 500;
margin: 8px 0px;
clear: both;
@ -28,11 +28,11 @@
.feature {
max-width: 300px;
margin: 0 16px;
margin: 0 16px;
@media (max-width: 768px) {
max-width: 100%;
}
}
}
}
}

4
aio/src/styles/2-modules/_filetree.scss
View File

@ -8,8 +8,8 @@
.file {
display: block;
font-family: $main-font;
letter-spacing: 0.3px;
line-height: 32px;
@include letter-spacing(0.3);
@include line-height(32);
color: $darkgray;
}

8
aio/src/styles/2-modules/_label.scss
View File

@ -2,7 +2,7 @@ label.raised, .api-header label {
border-radius: 4px;
padding: 4px 16px;
display: inline;
font-size: 14px;
@include font-size(14);
color: $white;
margin-right: 8px;
font-weight: 500;
@ -29,8 +29,8 @@ label.raised, .api-header label {
}
&.property-type-label {
font-size: 12px;
background-color: $darkgray;
@include font-size(12);
background-color: $darkgray;
color: $white;
text-transform: none;
}
@ -40,7 +40,7 @@ label.raised, .api-header label {
// The API badges should be a little smaller
padding: 2px 10px;
font-size: 12px;
@include font-size(12);
@media screen and (max-width: 600px) {
margin: 4px 0;

2
aio/src/styles/2-modules/_notification.scss
View File

@ -57,7 +57,7 @@ aio-notification {
border-radius: 15px;
text-transform: uppercase;
padding: 0 10px;
font-size: 12px;
@include font-size(12);
@media (max-width: 780px) {
display: none;
}

15
aio/src/styles/2-modules/_resources.scss
View File

@ -16,8 +16,8 @@
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
@include font-size(0);
@include line-height(0);
width: 0;
height: 0;
}
@ -60,8 +60,8 @@
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
@include font-size(0);
@include line-height(0);
width: 0;
height: 0;
}
@ -79,8 +79,8 @@
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
@include font-size(0);
@include line-height(0);
width: 0;
height: 0;
}
@ -101,7 +101,7 @@ aio-resource-list {
.c-resource {
h4 {
margin: 0;
line-height: 24px;
@include line-height(24);
}
p {
@ -131,6 +131,7 @@ aio-resource-list {
margin: 2px 0;
padding: 3px 14px;
font-size: 18px !important;
font-size: 1.8rem !important;
&:hover {
background: #edf0f2;

4
aio/src/styles/2-modules/_search-results.scss
View File

@ -54,7 +54,7 @@ aio-search-results.embedded .search-results {
height: 100%;
.search-section-header {
font-size: 16px;
@include font-size(16);
font-weight: 400;
margin: 10px 0px 5px;
text-transform: uppercase;
@ -71,7 +71,7 @@ aio-search-results.embedded .search-results {
}
a {
font-size: 14px;
@include font-size(14);
color: $lightgray;
text-decoration: none;
font-weight: normal;

8
aio/src/styles/2-modules/_select-menu.scss
View File

@ -10,10 +10,10 @@
box-sizing: border-box;
border: 1px solid $white;
color: $blue-grey-600;
font-size: 12px;
@include font-size(12);
font-weight: 400;
height: 32px;
line-height: 32px;
@include line-height(32);
outline: none;
padding: 0 16px;
text-align: left;
@ -51,8 +51,8 @@
li {
cursor: pointer;
font-size: 14px;
line-height: 32px;
@include font-size(14);
@include line-height(32);
margin: 0;
padding: 0 16px 0 40px;
position: relative;

10
aio/src/styles/2-modules/_table.scss
View File

@ -25,12 +25,12 @@ table {
background: rgba($lightgray, 0.2);
border-bottom: 1px solid $lightgray;
color: $darkgray;
font-size: 12px;
@include font-size(12);
font-weight: 500;
padding: 8px 24px;
text-align: left;
text-transform: uppercase;
line-height: 28px;
@include line-height(28);
}
}
@ -40,7 +40,7 @@ table {
border-bottom: 1px solid $lightgray;
padding: 16px;
text-align: left;
line-height: 24px;
@include line-height(24);
vertical-align: top;
@media (max-width: 480px) {
@ -53,7 +53,7 @@ table {
}
td {
letter-spacing: 0.30px;
@include letter-spacing(0.3);
tr td:first-child {
@media (max-width: 480px) {
@ -112,4 +112,4 @@ table {
}
}
}
}
}

10
aio/src/styles/2-modules/_toc.scss
View File

@ -23,13 +23,13 @@ aio-toc.embedded {
}
.toc-inner {
font-size: 13px;
@include font-size(13);
overflow-y: visible;
padding: 4px 0 0 10px;
.toc-heading,
.toc-list .h1 {
font-size: 115%;
@include font-size(16);
}
.toc-heading {
@ -117,8 +117,8 @@ aio-toc.embedded {
li {
box-sizing: border-box;
font-size: 12px;
line-height: 16px;
@include font-size(12);
@include line-height(16);
padding: 3px 0 3px 12px;
position: relative;
transition: all 0.3s ease-in-out;
@ -140,7 +140,7 @@ aio-toc.embedded {
a {
color: lighten($darkgray, 10);
overflow: visible;
font-size: 12px;
@include font-size(12);
display: table-cell;
}

18
aio/src/styles/_mixins.scss
View File

@ -40,6 +40,22 @@
}
}
// REM Font Adjustments
@mixin font-size($sizeValue) {
font-size: ($sizeValue) + px;
font-size: ($sizeValue / 10) + rem;
}
@mixin letter-spacing($spacingValue) {
letter-spacing: ($spacingValue) + px;
letter-spacing: ($spacingValue / 10) + rem;
}
@mixin line-height($heightValue) {
line-height: ($heightValue) + px;
line-height: ($heightValue / 10) + rem;
}
@mixin rotate($degrees) {
-moz-transform: rotate($degrees);
-webkit-transform: rotate($degrees);
@ -72,4 +88,4 @@
box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
text-decoration: none;
}
}
}