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

udpate colors and contrast for accessibility improvements

This commit is contained in:
Alex Wolfe 2016-09-16 12:45:58 -07:00 committed by Naomi Black
parent a0dbeee18a
commit e2ec60d8dd
13 changed files with 44 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/dart/latest/_data.json
View File

@ -4,7 +4,7 @@
"title": "Angular Docs", "title": "Angular Docs",
"subtitle": "Dart", "subtitle": "Dart",
"menuTitle": "Docs Home", "menuTitle": "Docs Home",
"banner": "Current release is <strong>beta.21</strong>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes." "banner": "Current release is <strong>beta.21</strong>. View the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
}, },
"quickstart": { "quickstart": {

2
public/docs/js/latest/_data.json
View File

@ -4,7 +4,7 @@
"title": "Angular Docs", "title": "Angular Docs",
"subtitle": "JavaScript", "subtitle": "JavaScript",
"menuTitle": "Docs Home", "menuTitle": "Docs Home",
"banner": "The current release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> for enhancements, fixes, and breaking changes." "banner": "Angular 2 release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
}, },
"quickstart": { "quickstart": {

2
public/docs/ts/latest/_data.json
View File

@ -4,7 +4,7 @@
"title": "Angular Docs", "title": "Angular Docs",
"subtitle": "TypeScript", "subtitle": "TypeScript",
"menuTitle": "Docs Home", "menuTitle": "Docs Home",
"banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>2.0.0</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> about recent enhancements, fixes, and breaking changes." "banner": "Angular 2 release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
}, },
"cli-quickstart": { "cli-quickstart": {

17
public/resources/css/base/_type.scss
View File

@ -8,6 +8,7 @@ body {
font-family: $brand-font; font-family: $brand-font;
font-size: 14px; font-size: 14px;
color: $blue-grey-600; color: $blue-grey-600;
&.ng-cloak { &.ng-cloak {
display: none; display: none;
} }
@ -25,7 +26,7 @@ body {
} }
a { a {
color: $blue-600; color: $blue-700;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -35,10 +36,10 @@ a {
} }
code { code {
background: $blue-grey-50; background: rgba($blue-grey-50, .56);
border-radius: 2px; border-radius: 2px;
font-family: $mono-font; font-family: $mono-font;
color: $teal-500; color: $teal-700;
padding: 0px 4px; padding: 0px 4px;
font-size: 90%; font-size: 90%;
} }
@ -102,7 +103,6 @@ code {
margin: 0px 0px ($unit * 2) 0px; margin: 0px 0px ($unit * 2) 0px;
font-size: 34px; font-size: 34px;
font-weight: 400; font-weight: 400;
opacity: .87;
line-height: 40px; line-height: 40px;
} }
@ -111,7 +111,6 @@ code {
margin: 0px 0px ($unit * 2) 0px; margin: 0px 0px ($unit * 2) 0px;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
opacity: .87;
line-height: 32px; line-height: 32px;
} }
@ -120,7 +119,6 @@ code {
margin: 0px 0px ($unit * 2) 0px; margin: 0px 0px ($unit * 2) 0px;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
opacity: .87;
line-height: 32px; line-height: 32px;
} }
@ -129,7 +127,6 @@ code {
font-size: 34px; font-size: 34px;
line-height: 40px; line-height: 40px;
margin: ($unit * 6) 0 ($unit * 3) 0; margin: ($unit * 6) 0 ($unit * 3) 0;
opacity: 0.87;
&:first-of-type { &:first-of-type {
margin-top: 0; margin-top: 0;
@ -169,7 +166,6 @@ table th,
margin: 0px 0px ($unit * 3) 0px; margin: 0px 0px ($unit * 3) 0px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
opacity: .87;
line-height: 28px; line-height: 28px;
padding: 0; padding: 0;
@ -187,7 +183,6 @@ table th,
table td { table td {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
opacity: .87;
line-height: 24px; line-height: 24px;
} }
@ -195,20 +190,18 @@ table td {
margin: 0px 0px ($unit * 2) 0px; margin: 0px 0px ($unit * 2) 0px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
opacity: .54;
line-height: 20px; line-height: 20px;
} }
.text-aside, .text-aside,
.docs-content aside { .docs-content aside {
@extend .text-caption; @extend .text-caption;
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); background: rgba($blue-grey-50, .24);
color: $blue-grey-700; color: $blue-grey-700;
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
line-height: 24px; line-height: 24px;
opacity: 1; opacity: 1;
background: rgba($blue-grey-50, .56);
border-radius: 2px; border-radius: 2px;
padding: $unit * 3; padding: $unit * 3;
margin-bottom: $unit * 2; margin-bottom: $unit * 2;

2
public/resources/css/module/_banner.scss
View File

@ -27,5 +27,7 @@
p, .text-body { p, .text-body {
color: $blue-grey-500; color: $blue-grey-500;
font-size: 18px; font-size: 18px;
line-height: 32px;
margin: 0;
} }
} }

10
public/resources/css/module/_card.scss
View File

@ -1,3 +1,11 @@
/*
* Hover Cards
*
* Hover cards used to display important sections with
* additional information and allow for users to click
* on the entire card to initiate action.
*/
.card { .card {
background: $white; background: $white;
border-radius: 4px; border-radius: 4px;
@ -34,7 +42,7 @@
h2 { h2 {
color: $blue-grey-600; color: $blue-grey-500;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: $unit * 3; line-height: $unit * 3;

5
public/resources/css/module/_code-box.scss
View File

@ -11,7 +11,7 @@
*/ */
$codebox-anti-pattern-color: $red-700; $codebox-anti-pattern-color: $red-700;
$codebox-primary-color: $blue-600; $codebox-primary-color: $blue-700;
$codebox-selected: $white; $codebox-selected: $white;
@ -48,12 +48,13 @@ $codebox-selected: $white;
line-height: $unit * 3; line-height: $unit * 3;
margin: 0; margin: 0;
outline: none; outline: none;
opacity: 1;
padding: 0 0 $unit $unit; padding: 0 0 $unit $unit;
text-transform: none; text-transform: none;
} }
nav button { nav button {
background: $blue-400; background: $blue-600;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
color: $white; color: $white;
font-size: 13px; font-size: 13px;

20
public/resources/css/module/_code.scss
View File

@ -149,16 +149,16 @@ $prettyprint-color: $blue-grey-700;
} }
.str, .str,
.atv { .atv {
color: $teal-600; color: $teal-700;
} }
.atn { .atn {
color: $teal-600; color: $teal-700;
} }
.com { .com {
color: $teal-600; color: $teal-700;
} }
.lit { .lit {
color: $teal-600; color: $teal-700;
} }
.pun { .pun {
color: $blue-grey-700; color: $blue-grey-700;
@ -167,7 +167,7 @@ $prettyprint-color: $blue-grey-700;
color: $blue-grey-700; color: $blue-grey-700;
} }
.dec { .dec {
color: $teal-600; color: $teal-700;
} }
@ -193,16 +193,16 @@ $prettyprint-color: $blue-grey-700;
} }
.str, .str,
.atv { .atv {
color: $teal-600; color: $teal-700;
} }
.atn { .atn {
color: $teal-600; color: $teal-700;
} }
.com { .com {
color: $teal-600; color: $teal-700;
} }
.lit { .lit {
color: $teal-600; color: $teal-700;
} }
.pun { .pun {
color: $blue-grey-700; color: $blue-grey-700;
@ -211,7 +211,7 @@ $prettyprint-color: $blue-grey-700;
color: $blue-grey-700; color: $blue-grey-700;
} }
.dec { .dec {
color: $teal-600; color: $teal-700;
} }
} }
} }

71
public/resources/css/module/_hero.scss
View File

@ -30,7 +30,6 @@
float: left; float: left;
line-height: 48px; line-height: 48px;
margin: 0 $unit 0 0; margin: 0 $unit 0 0;
opacity: .87;
text-transform: uppercase; text-transform: uppercase;
&.is-standard-case { &.is-standard-case {
@ -43,7 +42,6 @@
font-weight: 400; font-weight: 400;
line-height: $unit * 3; line-height: $unit * 3;
margin: 0; margin: 0;
opacity: .87;
text-transform: uppercase; text-transform: uppercase;
} }
@ -113,73 +111,4 @@
} }
} }
} }
/*
* Badges
*/
.hero-title-with-badges {
margin-bottom: $unit;
}
.status-circle {
margin-right: 4px;
border-radius: 50%;
width: 10px;
height: 10px;
display: inline-block;
}
// status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade
.status-deprecated {
background: #E53935;
}
.status-stable {
background: #558b2f;
}
.status-experimental {
background: #9575cd;
}
.badges {
display: flex;
justify-content: flex-start;
align-content: space-around;
align-items: center;
margin-top: 4px;
.status-badge {
color: #0143A3;
margin-left: 4px;
padding-left: 8px;
padding-right: 8px;
background-color: rgba(255,255,255,0.5);
border-radius: 2px;
line-height: 20px;
display: inline-block;
&:first-child {
margin-left: 0;
}
}
.security-risk-badge {
background-color: #FFF59D;
}
}
@media screen and (max-width: 599px) {
/* three items */
.badges .status-badge:nth-child(3) {
margin-left: 0;
margin-top: 4px;
}
.hero-title-with-badges {
margin-bottom: $unit * 2;
}
}
} }

1
public/resources/css/module/_home-promos.scss
View File

@ -12,7 +12,6 @@
h3.text-headline { h3.text-headline {
font-size: 28px; font-size: 28px;
margin-top: 10px; margin-top: 10px;
color: #37474F;
} }
.promo-image-container, .text-container { .promo-image-container, .text-container {

2
public/resources/css/module/_lists.scss
View File

@ -15,7 +15,7 @@
margin-top: $unit * 6; margin-top: $unit * 6;
h4 { h4 {
color: $blue-grey-400; color: $blue-grey-500;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: $unit * 4; line-height: $unit * 4;

8
public/resources/css/module/_side-nav.scss
View File

@ -10,10 +10,10 @@
*/ */
$sidenav: '.sidenav'; // Classname $sidenav: '.sidenav'; // Classname
$sidenav-background: $blue-grey-50; $sidenav-background: rgba($blue-grey-50, .56);
$sidenav-background-dark: $blue-grey-200; $sidenav-background-dark: $blue-grey-200;
$sidenav-color: $blue-grey-400; $sidenav-color: $blue-grey-500;
$sidenav-color-selected: $blue-600; $sidenav-color-selected: $blue-700;
$sidenav-width: 240px; $sidenav-width: 240px;
@ -191,7 +191,7 @@ $sidenav-width: 240px;
position: relative; position: relative;
&.is-selected { &.is-selected {
background: rgba($blue-grey-100, .56); background: rgba($blue-grey-100, .24);
color: $sidenav-color-selected; color: $sidenav-color-selected;
font-weight: 600; font-weight: 600;
} }

17
public/resources/css/module/_table.scss
View File

@ -1,6 +1,6 @@
table { table {
margin-bottom: $unit * 4; margin-bottom: $unit * 4;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
border-radius: 2px; border-radius: 2px;
background: $snow; background: $snow;
@ -10,8 +10,8 @@ table {
thead { thead {
th { th {
background: $mist; background: rgba($blue-grey-50, .24);
border-bottom: 1px solid $mist; border-bottom: 1px solid $blue-grey-50;
color: $metal; color: $metal;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
@ -24,21 +24,16 @@ table {
tbody { tbody {
th, th,
td { td {
border-bottom: 1px solid $mist; border-bottom: 1px solid $blue-grey-50;
color: $platinum;
padding: ($unit * 2) ($unit * 4); padding: ($unit * 2) ($unit * 4);
text-align: left; text-align: left;
} }
th { th {
background: rgba($mist, .24); background: rgba($blue-grey-50, .24);
border-right: 1px solid $mist; border-right: 1px solid $blue-grey-50;
font-weight: 600; font-weight: 600;
max-width: 100px; max-width: 100px;
a {
color: $blueberry;
}
} }
tr:last-child td { tr:last-child td {