udpate colors and contrast for accessibility improvements
This commit is contained in:
parent
a0dbeee18a
commit
e2ec60d8dd
|
@ -4,7 +4,7 @@
|
|||
"title": "Angular Docs",
|
||||
"subtitle": "Dart",
|
||||
"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": {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
"title": "Angular Docs",
|
||||
"subtitle": "JavaScript",
|
||||
"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": {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
"title": "Angular Docs",
|
||||
"subtitle": "TypeScript",
|
||||
"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": {
|
||||
|
|
|
@ -8,6 +8,7 @@ body {
|
|||
font-family: $brand-font;
|
||||
font-size: 14px;
|
||||
color: $blue-grey-600;
|
||||
|
||||
&.ng-cloak {
|
||||
display: none;
|
||||
}
|
||||
|
@ -25,7 +26,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $blue-600;
|
||||
color: $blue-700;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
@ -35,10 +36,10 @@ a {
|
|||
}
|
||||
|
||||
code {
|
||||
background: $blue-grey-50;
|
||||
background: rgba($blue-grey-50, .56);
|
||||
border-radius: 2px;
|
||||
font-family: $mono-font;
|
||||
color: $teal-500;
|
||||
color: $teal-700;
|
||||
padding: 0px 4px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
@ -102,7 +103,6 @@ code {
|
|||
margin: 0px 0px ($unit * 2) 0px;
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
opacity: .87;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
|
@ -111,7 +111,6 @@ code {
|
|||
margin: 0px 0px ($unit * 2) 0px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
opacity: .87;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
|
@ -120,7 +119,6 @@ code {
|
|||
margin: 0px 0px ($unit * 2) 0px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
opacity: .87;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
|
@ -129,7 +127,6 @@ code {
|
|||
font-size: 34px;
|
||||
line-height: 40px;
|
||||
margin: ($unit * 6) 0 ($unit * 3) 0;
|
||||
opacity: 0.87;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
|
@ -169,7 +166,6 @@ table th,
|
|||
margin: 0px 0px ($unit * 3) 0px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
opacity: .87;
|
||||
line-height: 28px;
|
||||
padding: 0;
|
||||
|
||||
|
@ -187,7 +183,6 @@ table th,
|
|||
table td {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
opacity: .87;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
|
@ -195,20 +190,18 @@ table td {
|
|||
margin: 0px 0px ($unit * 2) 0px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
opacity: .54;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text-aside,
|
||||
.docs-content aside {
|
||||
@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;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
opacity: 1;
|
||||
background: rgba($blue-grey-50, .56);
|
||||
border-radius: 2px;
|
||||
padding: $unit * 3;
|
||||
margin-bottom: $unit * 2;
|
||||
|
|
|
@ -27,5 +27,7 @@
|
|||
p, .text-body {
|
||||
color: $blue-grey-500;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
background: $white;
|
||||
border-radius: 4px;
|
||||
|
@ -34,7 +42,7 @@
|
|||
|
||||
|
||||
h2 {
|
||||
color: $blue-grey-600;
|
||||
color: $blue-grey-500;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 3;
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
*/
|
||||
|
||||
$codebox-anti-pattern-color: $red-700;
|
||||
$codebox-primary-color: $blue-600;
|
||||
$codebox-primary-color: $blue-700;
|
||||
$codebox-selected: $white;
|
||||
|
||||
|
||||
|
@ -48,12 +48,13 @@ $codebox-selected: $white;
|
|||
line-height: $unit * 3;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
padding: 0 0 $unit $unit;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
nav button {
|
||||
background: $blue-400;
|
||||
background: $blue-600;
|
||||
border-radius: 2px 2px 0 0;
|
||||
color: $white;
|
||||
font-size: 13px;
|
||||
|
|
|
@ -149,16 +149,16 @@ $prettyprint-color: $blue-grey-700;
|
|||
}
|
||||
.str,
|
||||
.atv {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.atn {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.com {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.lit {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.pun {
|
||||
color: $blue-grey-700;
|
||||
|
@ -167,7 +167,7 @@ $prettyprint-color: $blue-grey-700;
|
|||
color: $blue-grey-700;
|
||||
}
|
||||
.dec {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
|
||||
|
||||
|
@ -193,16 +193,16 @@ $prettyprint-color: $blue-grey-700;
|
|||
}
|
||||
.str,
|
||||
.atv {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.atn {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.com {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.lit {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
.pun {
|
||||
color: $blue-grey-700;
|
||||
|
@ -211,7 +211,7 @@ $prettyprint-color: $blue-grey-700;
|
|||
color: $blue-grey-700;
|
||||
}
|
||||
.dec {
|
||||
color: $teal-600;
|
||||
color: $teal-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -30,7 +30,6 @@
|
|||
float: left;
|
||||
line-height: 48px;
|
||||
margin: 0 $unit 0 0;
|
||||
opacity: .87;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.is-standard-case {
|
||||
|
@ -43,7 +42,6 @@
|
|||
font-weight: 400;
|
||||
line-height: $unit * 3;
|
||||
margin: 0;
|
||||
opacity: .87;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -12,7 +12,6 @@
|
|||
h3.text-headline {
|
||||
font-size: 28px;
|
||||
margin-top: 10px;
|
||||
color: #37474F;
|
||||
}
|
||||
|
||||
.promo-image-container, .text-container {
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
margin-top: $unit * 6;
|
||||
|
||||
h4 {
|
||||
color: $blue-grey-400;
|
||||
color: $blue-grey-500;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 4;
|
||||
|
|
|
@ -10,10 +10,10 @@
|
|||
*/
|
||||
|
||||
$sidenav: '.sidenav'; // Classname
|
||||
$sidenav-background: $blue-grey-50;
|
||||
$sidenav-background: rgba($blue-grey-50, .56);
|
||||
$sidenav-background-dark: $blue-grey-200;
|
||||
$sidenav-color: $blue-grey-400;
|
||||
$sidenav-color-selected: $blue-600;
|
||||
$sidenav-color: $blue-grey-500;
|
||||
$sidenav-color-selected: $blue-700;
|
||||
$sidenav-width: 240px;
|
||||
|
||||
|
||||
|
@ -191,7 +191,7 @@ $sidenav-width: 240px;
|
|||
position: relative;
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($blue-grey-100, .56);
|
||||
background: rgba($blue-grey-100, .24);
|
||||
color: $sidenav-color-selected;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
table {
|
||||
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;
|
||||
background: $snow;
|
||||
|
||||
|
@ -10,8 +10,8 @@ table {
|
|||
|
||||
thead {
|
||||
th {
|
||||
background: $mist;
|
||||
border-bottom: 1px solid $mist;
|
||||
background: rgba($blue-grey-50, .24);
|
||||
border-bottom: 1px solid $blue-grey-50;
|
||||
color: $metal;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
@ -24,21 +24,16 @@ table {
|
|||
tbody {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid $mist;
|
||||
color: $platinum;
|
||||
border-bottom: 1px solid $blue-grey-50;
|
||||
padding: ($unit * 2) ($unit * 4);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba($mist, .24);
|
||||
border-right: 1px solid $mist;
|
||||
background: rgba($blue-grey-50, .24);
|
||||
border-right: 1px solid $blue-grey-50;
|
||||
font-weight: 600;
|
||||
max-width: 100px;
|
||||
|
||||
a {
|
||||
color: $blueberry;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
|
|
Loading…
Reference in New Issue