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

tables and more info for code snippets

This commit is contained in:
Alex Wolfe 2015-04-06 07:08:11 -07:00
parent 2b2c5ce972
commit bcaa6646a8
8 changed files with 90 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/docs/_includes/styleguide/_alerts.jade
View File

@ -1,10 +1,11 @@
.showcase.shadow-1
#sg-alerts.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.
Alerts should not be used for multi-line content or stacked
on top of each other.
.showcase-content
.l-sub-section

19
public/docs/_includes/styleguide/_code-examples.jade
View File

@ -1,4 +1,4 @@
.showcase.shadow-1
#sg-code.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.
@ -23,6 +23,23 @@
pre.prettyprint.linenums:4
var title = "This starts on line four";
.l-sub-section
h3 Specify a language
p.
Prettify makes a best effort to guess the language but
works best with C-like and HTML-like languages. For
others, there are special language handlers that are
chosen based on language hints. Add a class that matches
your desired language (example below uses <strong>.lang-html</strong>)
pre(class="prettyprint lang-html")
code.
pre.prettyprint.lang-html
h1 Title
p This is some copy...
.l-sub-section
h3 Code Highlighting
p.

4
public/docs/_includes/styleguide/_jump-nav.jade
View File

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

40
public/docs/_includes/styleguide/_tables.jade Normal file
View File

@ -0,0 +1,40 @@
#sg-tables.showcase.shadow-1
header.showcase-header
h2 Tables
p.
Tables can be used to present tablular data as it relates
to each other.
.showcase-content
.l-sub-section
h3 Adding an table
table
tr
th Framework
th Task
th Speed
tr
td Angular 1.3
td Routing
td fast
tr
td Angular 1.4
td Routing
td faster
tr
td Angular 2
td Routing
td fastest :)
pre.prettyprint.linenums.lang-html
code.
table
tr
th Framework
th Task
th Speed
tr
td Angular 1.3
td Routing
td fast

1
public/docs/styleguide.jade
View File

@ -2,5 +2,6 @@
.c10
!= partial("/_includes/styleguide/_code-examples")
!= partial("/_includes/styleguide/_alerts")
!= partial("/_includes/styleguide/_tables")
!= partial("/_includes/styleguide/_jump-nav")

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

@ -77,6 +77,7 @@ a {
line-height: 32px;
}
table th,
.text-subhead,
.text-body,
.docs-content p,
@ -89,7 +90,8 @@ a {
line-height: 28px;
}
.l-sub-section p {
.l-sub-section p,
table td {
font-size: 14px;
font-weight: 400;
opacity: .87;

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

@ -25,6 +25,7 @@
@import 'module/banner';
@import 'module/cta-bar';
@import 'module/buttons';
@import 'module/table';
@import 'module/code';
@import 'module/sticker';
@import 'module/bio-card';

22
public/resources/css/module/_table.scss Normal file
View File

@ -0,0 +1,22 @@
table {
margin-bottom: $unit * 4;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
border-radius: 2px;
background: $snow;
th,
td {
padding: ($unit * 2) ($unit * 4);
border-bottom: 1px solid $fog;
text-align: left;
}
th {
background: $mist;
font-weight: 500;
}
tr:last-child td {
border: none;
}
}