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

initial styleguide files

This commit is contained in:
Alex Wolfe 2015-04-06 06:41:08 -07:00
parent 8a8f1c19c6
commit 78391effbd
11 changed files with 177 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/_includes/_footer.jade
View File

@ -43,3 +43,5 @@
footer(class="background-steel")
small.text-caption Powered by Google ©2010-2015. Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" class="text-snow">Apache License, Version 2.0</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
a(href="/docs/styleguide.html" title="Style Guide" class="styleguide-trigger text-snow" md-button)
span.icon-favorite

21
public/docs/_includes/styleguide/_alerts.jade Normal file
View File

@ -0,0 +1,21 @@
.showcase.shadow-1
header.showcase-header
h2 Alerts
p.
Please use alerts sparingly throughout the docs.
They are meant to draw attention on important occasions.
Alerts should not be used for multi-line content.
.showcase-content
.l-sub-section
h3 Adding an alert
.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

46
public/docs/_includes/styleguide/_code-examples.jade Normal file
View File

@ -0,0 +1,46 @@
.showcase.shadow-1
header.showcase-header
h2 Code Examples
p Below are some examples of how you can add/customize code examples in a page.
.showcase-content
.l-sub-section
h3 Adding a code example
pre.prettyprint.linenums
code.
pre.prettyprint.linenums
code.
//SOME CODE
var name = "Alex Wolfe";
alert(name);
.l-sub-section
h3 Specify starting line number
pre(class="prettyprint linenums:4")
code.
pre.prettyprint.linenums:4
var title = "This starts on line four";
.l-sub-section
h3 Code Highlighting
p.
There are three types of highlights avialable
<strong>Outlined</strong>, <strong>Pink</strong>, and
<strong>Black</strong>. You can see examples below and
the class names needed for each type.
pre.prettyprint.linenums
code.
// Pink Background Version
// class="pnk"
var elephants = "The <span class="pnk">pink</span> elephants were marching...";
// Black Background Version
// class="blk"
var night = "The night was pitch <span class="blk">black</span>.";
// Outlined Version
// class="otl"
var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";

7
public/docs/_includes/styleguide/_jump-nav.jade Normal file
View File

@ -0,0 +1,7 @@
nav.jump-nav
ul
li
a(href="#" class="button" md-button) Code Examples
li
a(href="#" class="button" md-button) Alerts

57
public/docs/styleguide.jade
View File

@ -1,57 +0,0 @@
.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-sub-section
h3 Specify starting line number
pre(class="prettyprint linenums:4")
code.
pre.prettyprint.linenums:4
var title = "This starts on line four";
.l-sub-section
h3 Code Highlighting
p.
There are three types of highlights avialable
<strong>Outlined</strong>, <strong>Pink</strong>, and
<strong>Black</strong>. You can see examples below and
the class names needed for each type.
pre.prettyprint.linenums
code.
// Pink Background Version
// class="pnk"
var elephants = "The <span class="pnk">pink</span> elephants were marching...";
// Black Background Version
// class="blk"
var night = "The night was pitch <span class="blk">black</span>.";
// Outlined Version
// class="otl"
var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";
.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

13
public/resources/css/layout/_layout.scss
View File

@ -13,6 +13,19 @@
float: right;
}
.l-relative,
.docs-content {
position: relative;
}
.l-absolute {
position: absolute;
}
.l-fixed {
position: fixed;
}
/*
* Pinned Layouts (fixed)

3
public/resources/css/main.scss
View File

@ -18,6 +18,7 @@
@import 'module/main-nav';
@import 'module/side-nav';
@import 'module/jump-nav';
@import 'module/footer';
@import 'module/dropdown';
@import 'module/hero';
@ -31,6 +32,8 @@
@import 'module/alert';
@import 'module/card';
@import 'module/modal';
@import 'module/shadow';
@import 'module/showcase';
/*

11
public/resources/css/module/_footer.scss
View File

@ -80,9 +80,16 @@
footer {
text-align: center;
padding: $unit * 2;
position: relative;
a {
.styleguide-trigger {
position: absolute;
top: $unit * 2;
right: $unit * 2;
font-size: 14px;
line-height: 20px;
padding: 0px $unit;
opacity: .24;
}
}
}

24
public/resources/css/module/_jump-nav.scss Normal file
View File

@ -0,0 +1,24 @@
.jump-nav {
position: absolute;
top: $unit * 8;
right: $unit * 6;
width: $unit * 20;
z-index: $layer-1;
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
li {
padding: 0px;
margin: 0px;
border-bottom: 1px solid $fog;
a.button {
display: block;
text-align: left;
}
}
}

32
public/resources/css/module/_shadow.scss Normal file
View File

@ -0,0 +1,32 @@
/*
* Shadow layers
*
*/
.shadow-1,
.shadow-2,
.shadow-3,
.shadow-4,
.shadow-5 {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.shadow-1 {
box-shadow: 0 1px 4px 0 rgba($coal, 0.37);
}
.shadow-2 {
box-shadow: 0 2px 2px 0 rgba($coal, 0.2), 0 6px 10px 0 rgba($coal, 0.3);
}
.shadow-3 {
box-shadow: 0 11px 7px 0 rgba($coal, 0.19),0 13px 25px 0 rgba($coal, 0.3);
}
.shadow-4 {
box-shadow: 0 14px 12px 0 rgba($coal, 0.17), 0 20px 40px 0 rgba($coal, 0.3);
}
.shadow-5 {
box-shadow: 0 17px 17px 0 rgba($coal, 0.15), 0 27px 55px 0 rgba($coal, 0.3);
}

20
public/resources/css/module/_showcase.scss Normal file
View File

@ -0,0 +1,20 @@
.showcase {
margin-bottom: $unit * 6;
.showcase-header {
padding: $unit * 4;
background: $mist;
h3 {
}
p:last-child {
margin: 0;
}
}
.showcase-content {
padding: $unit * 4;
}
}