added alerts style

This commit is contained in:
Alex Wolfe 2015-03-04 05:21:10 -08:00
parent 55a56343e2
commit 2a020cf129
15 changed files with 97 additions and 58 deletions

View File

@ -3,8 +3,9 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
input(type="search" placeholder="SEARCH DOCS...")
ul.side-nav-primary
for page, slug in public.docs[current.path[1]][current.path[2]]._data
name = page.menuTitle || page.title
selected = current.path[3] == slug ? 'is-selected':''
if current.path[2]
for page, slug in public.docs[current.path[1]][current.path[2]]._data
name = page.menuTitle || page.title
selected = current.path[3] == slug ? 'is-selected':''
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>

View File

@ -13,3 +13,13 @@ script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/site.js")
<!-- GA -->
script
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8594346-15', 'auto');
ga('send', 'pageview')

View File

@ -13,6 +13,7 @@
"styleguide": {
"title": "Docs Style Guide",
"subtitle": "Design & Layout Patterns For Documentation",
"layout": "../_layout"
"layout": "../_layout",
"autoformat": "true"
}
}

View File

@ -1,21 +0,0 @@
{
"index": {
"title": "Angular Docs"
},
"quickstart": {
"title": "5 Min Quickstart"
},
"resources": {
"title": "Angular Resources"
},
"api": {
"title": "API Proposal"
},
"help": {
"title": "Help & Support"
}
}

View File

@ -1 +0,0 @@
H1 API

View File

@ -1 +0,0 @@
h1 Help &amp; Support

View File

@ -1,20 +0,0 @@
div.c4
md-card
md-card-content
h2 Paracosm
p he titles of Washed Out's breakthrough song and the first single from Paracosm share the * two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
div.c4
md-card
md-card-content
h2 Paracosm
p he titles of Washed Out's breakthrough song and the first single from Paracosm share the * two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
div.c4
md-card
md-card-content
h2 Paracosm
p he titles of Washed Out's breakthrough song and the first single from Paracosm share the * two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

View File

@ -1 +0,0 @@
h1 JavaScript Quickstart

View File

@ -1 +0,0 @@
h1 resources

View File

@ -1 +1,27 @@
adsf
.l-main-section
h2 Code Examples
p To create a code example like the one below, simple copy the code
pre.prettyprint.linenums
code.
pre.prettyprint.linenums
code.
//SOME CODE
var name = "Alex Wolfe";
alert(name);
.l-main-section
h2 Alerts
p Single line statments that are additional or critical to the content of a section or page.
.alert.is-critical A very <strong>critical</strong> alert
.alert.is-important A very <strong>important</strong> alert
.alert.is-helpful A very <strong>helpful</strong> alert
pre.prettyprint.linenums
code.
.alert.is-critical A very <strong>critical</strong> alert
.alert.is-important A very <strong>important</strong> alert
.alert.is-helpful A very <strong>helpful</strong> alert

View File

@ -0,0 +1,13 @@
{
"index": {
"title": "Angular Docs",
"subtitle": "Choose a language for Angular",
"downloads": {
"angular2": {
}
}
}
}

View File

View File

@ -9,7 +9,21 @@
// GREEN COLORS
$cactus: #8BC34A;
// YELLOW
$sunshine: #FFF59D;
// ORANGE
$sand: #FFF8E1;
$citrus: #FF8F00;
// RED COLORS
$peach: #ffebee;
$squid: #EF3872;
$cardinal: #E23237;
$ruby: #B52E31;
// BLUE COLORS
$light: #E3F2FD;
$sky: #0085D3;
$regal: #0273D4;
$blueberry: #0262C2;
@ -18,11 +32,6 @@ $ocean: #0143A3;
//PURPLE
$grape: #9575CD;
// RED COLORS
$squid: #EF3872;
$cardinal: #E23237;
$ruby: #B52E31;
// DARK GRAY COLORS
$coal: #000000;
$steel: #253238;
@ -37,8 +46,6 @@ $fog: #CFD8DC;
$mist: #ECEFF1;
$snow: #FFFFFF;
// YELLOW
$sunshine: #FFF59D;
/*
* Typography

View File

@ -28,6 +28,7 @@
@import 'module/sticker';
@import 'module/bio-card';
@import 'module/overlay';
@import 'module/alert';
/*

View File

@ -0,0 +1,25 @@
.alert {
border-width: 2px;
border-style: solid;
padding: $unit ($unit * 2);
line-height: $unit * 4;
font-size: 14px;
border-radius: 4px;
color: $steel;
margin-bottom: $unit * 2;
&.is-critical {
border-color: $cardinal;
background: $peach;
}
&.is-important {
border-color: $citrus;
background: $sand;
}
&.is-helpful {
border-color: $blueberry;
background: $light;
}
}