tables and more info for code snippets
This commit is contained in:
parent
2b2c5ce972
commit
bcaa6646a8
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
|
@ -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
|
|
@ -2,5 +2,6 @@
|
|||
.c10
|
||||
!= partial("/_includes/styleguide/_code-examples")
|
||||
!= partial("/_includes/styleguide/_alerts")
|
||||
!= partial("/_includes/styleguide/_tables")
|
||||
|
||||
!= partial("/_includes/styleguide/_jump-nav")
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue