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

callouts added

This commit is contained in:
Alex Wolfe 2015-04-07 20:38:52 -07:00
parent 981465f8f6
commit 5427926e0d
5 changed files with 87 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
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 or stacked
Alerts should not be used for multi-line content (user callouts insteads) or stacked
on top of each other.
.showcase-content

38
public/docs/_includes/styleguide/_callouts.jade Normal file
View File

@ -0,0 +1,38 @@
#sg-callouts.showcase.shadow-1
header.showcase-header
h2 Callouts
p.
Please use callouts sparingly throughout the docs.
Callouts (like alerts) are meant to draw attention on important occasions.
Unlike alerts, callouts are designed to display multi-line content.
.showcase-content
.l-sub-section
h3 Adding a Callout
.callout.is-critical
header A Critical Title
p.
Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
.callout.is-important
header A Very Important Title
p.
A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
.callout.is-helpful
header A Very Helpful Title
p.
Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
pre.prettyprint.linenums.lang-html
code.
.callout.is-critical
header A Critical Title
p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
.callout.is-important
header A Very Important Title
p A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
.callout.is-helpful
header A Very Helpful Title
p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix

1
public/docs/styleguide.jade
View File

@ -3,6 +3,7 @@
!= partial("/_includes/styleguide/_layouts")
!= partial("/_includes/styleguide/_code-examples")
!= partial("/_includes/styleguide/_alerts")
!= partial("/_includes/styleguide/_callouts")
!= partial("/_includes/styleguide/_tables")
!= partial("/_includes/styleguide/_aside")

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

@ -31,6 +31,7 @@
@import 'module/bio-card';
@import 'module/overlay';
@import 'module/alert';
@import 'module/callout';
@import 'module/card';
@import 'module/modal';
@import 'module/shadow';

46
public/resources/css/module/_callout.scss Normal file
View File

@ -0,0 +1,46 @@
.callout {
@extend .alert;
padding: 0px;
header {
color: $snow;
padding: 0px ($unit * 2);
line-height: $unit * 4;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
}
p {
padding: $unit * 2;
margin: 0px;
font-size: 14px;
}
&.is-critical {
border-color: $cardinal;
background: $peach;
header {
background: $cardinal;
}
}
&.is-important {
border-color: $citrus;
background: $sand;
header {
background: $citrus;
}
}
&.is-helpful {
border-color: $blueberry;
background: $light;
header {
background: $blueberry;
}
}
}