Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrade slate #189

Merged
merged 3 commits into from
Nov 24, 2015
Merged

upgrade slate #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55103ae
upgrade slate
JefMari Nov 23, 2015
81a4af2
Merge branch 'master' of https://github.com/dev-onenetworkecommerce/a…
JefMari Nov 24, 2015
f72b3e8
upgrade slate to 2.0
JefMari Nov 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 31 additions & 45 deletions docs/dist/script.js
View file
Open in desktop
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
Open in desktop

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
Open in desktop
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
Open in desktop
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But this means you have small space between the last paragraph and the button, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, though it override our default p structure given by _type.scss
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about remove this one and include p in > *:last-child { margin-bottom: 0; }?
It will be like > p:last-child, *:last-child { margin-bottom: 0; }
image

}

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