Skip to content

Commit

Permalink
Merge pull request #189 from dev-onenetworkecommerce/slate
Browse files Browse the repository at this point in the history 
upgrade slate
  • Loading branch information
@srph
srph committed Nov 24, 2015
2 parents 600cbc2 + f72b3e8 commit bb00afc
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 71 deletions.
76 changes: 31 additions & 45 deletions docs/dist/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29866,11 +29866,17 @@
_react2["default"].createElement(
"p",
{ className: "lead" },
"Use this as a placeholder for empty collections or loading resources."
"Use this as a placeholder for loading collections with lack of resources or empty results. Together with an icon, it gives an instant definition on what the state is for."
),
_react2["default"].createElement(
"div",
{ className: "alert -sky doc-bottom-space" },
"Heads up! Paragraphs are optional inside the slate."
),
_react2["default"].createElement(
"div",
{ className: "slate" },
_react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
_react2["default"].createElement(
"h2",
null,
Expand All @@ -29894,13 +29900,20 @@
_react2["default"].createElement(
"p",
null,
"Add the .-spacious class to your slate."
"Add the ",
_react2["default"].createElement(
"code",
null,
".-spacious"
),
" class to your slate."
),
_react2["default"].createElement(
"div",
{ className: "slate -spacious" },
_react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
_react2["default"].createElement(
"h3",
"h2",
null,
"Slate spacious"
),
Expand All @@ -29922,14 +29935,21 @@
_react2["default"].createElement(
"p",
null,
"You can make a plain slate by adding the .-plain modifier class"
"You can make a plain slate by adding the ",
_react2["default"].createElement(
"code",
null,
".-plain"
),
" modifier class"
),
_react2["default"].createElement(
"div",
{ className: "row" },
_react2["default"].createElement(
"div",
{ className: "slate -plain" },
_react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
_react2["default"].createElement(
"h2",
null,
Expand Down Expand Up @@ -29959,45 +29979,11 @@
_react2["default"].createElement(
"div",
{ className: "slate col-md-6 _centered" },
_react2["default"].createElement(
"h2",
null,
"Centered Half Slate"
),
_react2["default"].createElement(
"p",
null,
"Centered slate with 50% width"
)
)
),
_react2["default"].createElement(
"section",
{ className: "doc-bottom-space" },
_react2["default"].createElement(
"h3",
{ className: "doc-heading" },
"Example: With Icons"
),
_react2["default"].createElement(
"p",
null,
"Icons are automatically given a margin of ",
_react2["default"].createElement(
"code",
null,
"$spacer-large"
),
"."
),
_react2["default"].createElement(
"div",
{ className: "slate" },
_react2["default"].createElement("i", { className: "icon icon-cog -x8" }),
_react2["default"].createElement(
"h2",
null,
"Half Slate with Icons"
"Centered Half Slate"
),
_react2["default"].createElement(
"p",
Expand All @@ -30012,12 +29998,12 @@
_react2["default"].createElement(
"h3",
{ className: "doc-heading" },
"Example: With Loader "
"Example: Loading State "
),
_react2["default"].createElement(
"p",
null,
"Works similarly to icons."
"Slate can be use as loading state."
),
_react2["default"].createElement(
"div",
Expand All @@ -30038,16 +30024,16 @@
),
_react2["default"].createElement(
"section",
null,
{ className: "doc-bottom-space-large" },
_react2["default"].createElement(
"h1",
"h3",
{ className: "doc-heading" },
"Example: With Icon and Button"
"Example: With Button"
),
_react2["default"].createElement(
"p",
null,
"This is how a slate fully looks like."
"This is how a slate fully looks like with button."
),
_react2["default"].createElement(
"div",
Expand Down
6 changes: 3 additions & 3 deletions docs/dist/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 14 additions & 19 deletions docs/sections/Docs-Slate/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,31 @@ export default class Slate extends React.Component {
<div>
<section className="doc-bottom-space-large">
<h1 className="doc-heading">Slate</h1>
<p className="lead">Use this as a placeholder for empty collections or loading resources.</p>
<p className="lead">Use this as a placeholder for loading collections with lack of resources or empty results. Together with an icon, it gives an instant definition on what the state is for.</p>
<div className="alert -sky doc-bottom-space">Heads up! Paragraphs are optional inside the slate.</div>
<div className="slate">
<i className="icon icon-cog -x8" />
<h2>This is a blank slate</h2>
<p>Use it to provide information when no dynamic content exists.</p>
</div>
</section>

<section className="doc-bottom-space-large">
<h3 className="doc-heading">Example: Spacious</h3>
<p>Add the .-spacious class to your slate.</p>
<p>Add the <code>.-spacious</code> class to your slate.</p>
<div className="slate -spacious">
<h3>Slate spacious</h3>
<i className="icon icon-cog -x8" />
<h2>Slate spacious</h2>
<p>Adds padding to your contents</p>
</div>
</section>

<section className="doc-bottom-space">
<h3 className="doc-heading">Example: Plain</h3>
<p>You can make a plain slate by adding the .-plain modifier class</p>
<p>You can make a plain slate by adding the <code>.-plain</code> modifier class</p>
<div className="row">
<div className="slate -plain">
<i className="icon icon-cog -x8" />
<h2>Slate with No Background</h2>
<p>No border-radius and white background</p>
</div>
Expand All @@ -37,24 +41,15 @@ export default class Slate extends React.Component {
<h3 className="doc-heading">Example: Center Half-sized Slate</h3>
<p>With the centered grid column, you can center a slate.</p>
<div className="slate col-md-6 _centered">
<i className="icon icon-cog -x8" />
<h2>Centered Half Slate</h2>
<p>Centered slate with 50% width</p>
</div>
</div>

<section className="doc-bottom-space">
<h3 className="doc-heading">Example: With Icons</h3>
<p>Icons are automatically given a margin of <code>$spacer-large</code>.</p>
<div className="slate">
<i className="icon icon-cog -x8" />
<h2>Half Slate with Icons</h2>
<p>Centered slate with 50% width</p>
</div>
</section>

<section className="doc-bottom-space-large">
<h3 className="doc-heading">Example: With Loader </h3>
<p>Works similarly to icons.</p>
<h3 className="doc-heading">Example: Loading State </h3>
<p>Slate can be use as loading state.</p>
<div className="slate">
<div className="tri-circle-loader">
<div />
Expand All @@ -65,9 +60,9 @@ export default class Slate extends React.Component {
</div>
</section>

<section>
<h1 className="doc-heading">Example: With Icon and Button</h1>
<p>This is how a slate fully looks like.</p>
<section className="doc-bottom-space-large">
<h3 className="doc-heading">Example: With Button</h3>
<p>This is how a slate fully looks like with button.</p>
<div className="slate">
<i className="icon icon-cog -x8" />
<h2>This is a blank slate</h2>
Expand Down
7 changes: 3 additions & 4 deletions styles/components/_slate.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,12 @@
&.-plain { background: $brand-white; }

// For consistency
h1, h2, h3, h4, h5, h6, p {
h1, h2, h3, h4, h5, h6 {
margin-bottom: $spacer-large;
}

// To put a margin for preceding elements like icon and loader
h1, h2, h3, h4, h5, h6 {
margin-top: $spacer-large;
p {
margin-bottom: $spacer-small;
}

> *:last-child { margin-bottom: 0; }
Expand Down

0 comments on commit bb00afc

Please sign in to comment.