Summary Files Commits Branches @commit @diff @stats
path: root / docs
diff options
context:
space:
mode:
Commitbc2ebdd15b0d729f45553e7d877eb3308b02e153 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-03-27 19:08:02 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2017-03-27 19:08:02 +0800
Filesdcc4a0163cebb64190d7e3911b2200f0602f3c07 /docs
Spectre-Dark-Gruvbox-bc2ebdd15b0d729f45553e7d877eb3308b02e153.tar
Spectre-Dark-Gruvbox-bc2ebdd15b0d729f45553e7d877eb3308b02e153.tar.gz
Spectre-Dark-Gruvbox-bc2ebdd15b0d729f45553e7d877eb3308b02e153.zip
Parentbe1c5e2977a536c7d15fa7cd9389cd344ec69428 (diff)
Add more CSS icons: refresh, search, edit, share, download, upload, people and link
6 files changed, 234 insertions, 23 deletions
-rw-r--r--docs/components.html11
-rw-r--r--docs/css/spectre-icons.css170
-rw-r--r--docs/css/spectre-icons.min.css2
-rw-r--r--docs/elements.html56
-rw-r--r--docs/index.html4
-rw-r--r--docs/layout.html14
diff --git a/docs/components.html b/docs/components.html
index cbe664e..3d074b2 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -10,7 +10,6 @@
<link rel="stylesheet" href="css/spectre.css" />
<link rel="stylesheet" href="css/spectre-icons.css" />
<link rel="stylesheet" href="css/docs.css" />
- <link rel="stylesheet" href="font/style.css" />
</head>
<body>
<section class="section section-header bg-gray">
@@ -512,7 +511,7 @@
<img class="img-responsive" src="img/osx-el-capitan-2.jpg" />
</div>
<div class="card-header">
- <button class="btn btn-primary float-right"><i class="icon icon-playlist_add"></i></button>
+ <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
<div class="card-title">Google I/O</div>
<div class="card-subtitle">Software and hardware</div>
</div>
@@ -1607,7 +1606,7 @@
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-explore centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+ &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
@@ -1629,7 +1628,7 @@
<div class="tile tile-centered">
<div class="tile-icon">
<div class="example-tile-icon">
- <i class="icon icon-explore centered"></i>
+ <i class="icon icon-file centered"></i>
</div>
</div>
<div class="tile-content">
@@ -1647,7 +1646,7 @@
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-explore centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+ &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
@@ -1673,7 +1672,7 @@
<div class="column col-9 col-sm-12">
<div class="toast">
<button class="btn btn-clear float-right"></button>
- <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
diff --git a/docs/css/spectre-icons.css b/docs/css/spectre-icons.css
index 627fb09..f6f8325 100644
--- a/docs/css/spectre-icons.css
+++ b/docs/css/spectre-icons.css
@@ -71,7 +71,7 @@
content: "";
height: .2rem;
left: 60%;
- width: 80%;
+ width: .8em;
}
.icon-caret::before {
border-left: .3em solid transparent;
@@ -141,23 +141,183 @@
transform: translate(-50%, -75%) rotate(-45deg);
width: .9em;
}
+.icon-refresh::before {
+ border: .2rem solid currentColor;
+ border-radius: 50%;
+ border-right-color: transparent;
+ content: "";
+ height: .9em;
+ width: .9em;
+}
+.icon-refresh::after {
+ border: .2em solid currentColor;
+ border-left-color: transparent;
+ border-top-color: transparent;
+ content: "";
+ height: 0;
+ left: 75%;
+ top: 25%;
+ width: 0;
+}
+.icon-search::before {
+ border: .2rem solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .75em;
+ left: 5%;
+ top: 5%;
+ -webkit-transform: translate(0, 0) rotate(45deg);
+ -ms-transform: translate(0, 0) rotate(45deg);
+ transform: translate(0, 0) rotate(45deg);
+ width: .75em;
+}
+.icon-search::after {
+ background: currentColor;
+ content: "";
+ height: .2rem;
+ left: 80%;
+ top: 80%;
+ -webkit-transform: translate(-50%, -50%) rotate(45deg);
+ -ms-transform: translate(-50%, -50%) rotate(45deg);
+ transform: translate(-50%, -50%) rotate(45deg);
+ width: .4em;
+}
+.icon-edit::before {
+ border: .2rem solid currentColor;
+ content: "";
+ height: .4em;
+ -webkit-transform: translate(-40%, -60%) rotate(-45deg);
+ -ms-transform: translate(-40%, -60%) rotate(-45deg);
+ transform: translate(-40%, -60%) rotate(-45deg);
+ width: .85em;
+}
+.icon-edit::after {
+ border: .15em solid currentColor;
+ border-right-color: transparent;
+ border-top-color: transparent;
+ content: "";
+ height: 0;
+ left: 10%;
+ top: 95%;
+ -webkit-transform: translate(0, -100%);
+ -ms-transform: translate(0, -100%);
+ transform: translate(0, -100%);
+ width: 0;
+}
+.icon-share {
+ border: .2rem solid currentColor;
+ border-radius: .2rem;
+ border-right: 0;
+ border-top: 0;
+}
+.icon-share::before {
+ border: .2rem solid currentColor;
+ border-bottom: 0;
+ border-right: 0;
+ content: "";
+ height: .4em;
+ left: 100%;
+ top: 35%;
+ -webkit-transform: translate(-125%, -50%) rotate(135deg);
+ -ms-transform: translate(-125%, -50%) rotate(135deg);
+ transform: translate(-125%, -50%) rotate(135deg);
+ width: .4em;
+}
+.icon-share::after {
+ border: .2rem solid currentColor;
+ border-bottom: 0;
+ border-right: 0;
+ border-top-left-radius: 50%;
+ content: "";
+ height: .4em;
+ width: .5em;
+}
+.icon-download::before,
+.icon-upload::before {
+ border: .2rem solid currentColor;
+ border-bottom: 0;
+ border-right: 0;
+ content: "";
+ height: .5em;
+ -webkit-transform: translate(-50%, -50%) rotate(-135deg);
+ -ms-transform: translate(-50%, -50%) rotate(-135deg);
+ transform: translate(-50%, -50%) rotate(-135deg);
+ width: .5em;
+}
+.icon-download::after,
+.icon-upload::after {
+ background: currentColor;
+ content: "";
+ height: .6em;
+ top: 40%;
+ width: .2rem;
+}
+.icon-download {
+ border-bottom: .2rem solid currentColor;
+}
+.icon-upload {
+ border-top: .2rem solid currentColor;
+}
+.icon-upload::before {
+ -webkit-transform: translate(-50%, -50%) rotate(45deg);
+ -ms-transform: translate(-50%, -50%) rotate(45deg);
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+.icon-upload::after {
+ top: 60%;
+}
.icon-mail::before {
border: .2rem solid currentColor;
border-radius: .2rem;
content: "";
- height: 75%;
- width: 100%;
+ height: .8em;
+ width: 1em;
}
.icon-mail::after {
border: .2rem solid currentColor;
border-right: 0;
border-top: 0;
content: "";
- height: 50%;
+ height: .5em;
-webkit-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
-ms-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
- width: 50%;
+ width: .5em;
+}
+.icon-people::before {
+ border: .2rem solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .45em;
+ top: 25%;
+ width: .45em;
+}
+.icon-people::after {
+ border: .2rem solid currentColor;
+ border-radius: 50% 50% 0 0;
+ content: "";
+ height: .4em;
+ top: 75%;
+ width: .9em;
+}
+.icon-link::before,
+.icon-link::after {
+ border: .2rem solid currentColor;
+ border-radius: 5em;
+ border-right-color: transparent;
+ content: "";
+ height: .5em;
+ width: .75em;
+}
+.icon-link::before {
+ -webkit-transform: translate(-70%, -45%) rotate(-45deg);
+ -ms-transform: translate(-70%, -45%) rotate(-45deg);
+ transform: translate(-70%, -45%) rotate(-45deg);
+}
+.icon-link::after {
+ -webkit-transform: translate(-30%, -55%) rotate(135deg);
+ -ms-transform: translate(-30%, -55%) rotate(135deg);
+ transform: translate(-30%, -55%) rotate(135deg);
}
.btn .icon,
.toast .icon,
diff --git a/docs/css/spectre-icons.min.css b/docs/css/spectre-icons.min.css
index 6d3b859..a9735de 100644
--- a/docs/css/spectre-icons.min.css
+++ b/docs/css/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:80%}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:75%;width:100%}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:50%;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:50%}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%} \ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.8em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:10%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.4em;left:100%;top:35%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.4em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-right:0;border-top-left-radius:50%;content:"";height:.4em;width:.5em}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-50%) rotate(-135deg);-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-download{border-bottom:.2rem solid currentColor}.icon-upload{border-top:.2rem solid currentColor}.icon-upload::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-upload::after{top:60%}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%} \ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index fcba870..12b0dd2 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -411,9 +411,9 @@
<button class="btn btn-primary btn-sm">small</button>
</div>
<div class="column col-3 col-xs-12">
- <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-cross"></i></button>
- <button class="btn btn-action btn-primary"><i class="icon icon-cross"></i></button>
- <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-cross"></i></button>
+ <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
+ <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
+ <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
</div>
<div class="column col-3 col-xs-12">
<button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button>
@@ -1014,7 +1014,7 @@
<section id="icons" class="container">
<header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
<section class="notes">
- <p><strong>Icons</strong> are pure CSS icons.</p>
+ <p><strong>Icons</strong> are pure CSS icons. You can include <code>spectre-icons.css</code> in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
</section>
<div class="columns">
<div class="column col-3 col-md-6">
@@ -1115,10 +1115,58 @@
</div>
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-refresh"></i>
+ </button>
+ <p>icon-refresh</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-search"></i>
+ </button>
+ <p>icon-search</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-edit"></i>
+ </button>
+ <p>icon-edit</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-share"></i>
+ </button>
+ <p>icon-share</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-download"></i>
+ </button>
+ <p>icon-download</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-upload"></i>
+ </button>
+ <p>icon-upload</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
<i class="icon icon-mail"></i>
</button>
<p>icon-mail</p>
</div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-people"></i>
+ </button>
+ <p>icon-people</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-link"></i>
+ </button>
+ <p>icon-link</p>
+ </div>
</div>
<!-- icons example -->
diff --git a/docs/index.html b/docs/index.html
index 48b6d68..ad39d67 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -156,6 +156,7 @@
<!-- install manually example -->
<pre class="code"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;dist/spectre.min.css&quot;</span> /&gt;
&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;dist/spectre-exp.min.css&quot;</span> /&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;dist/spectre-icons.min.css&quot;</span> /&gt;
</code></pre>
</section>
@@ -180,6 +181,8 @@
├── dist/
│ ├── spectre-exp.css
│ ├── spectre-exp.min.css
+│ ├── spectre-icons.css
+│ ├── spectre-icons.min.css
│ ├── spectre.css
│ └── spectre.min.css
│
@@ -197,6 +200,7 @@
│ └── ...
│
├── spectre-exp.less
+├── spectre-icons.less
└── spectre.less
</code></pre>
diff --git a/docs/layout.html b/docs/layout.html
index e026059..7115502 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -474,7 +474,7 @@
<div class="tile-subtitle">bruce.banner@hulk.com</div>
</div>
<div class="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-mail_outline"></i></button>
+ <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
</div>
</div>
<div class="tile tile-centered">
@@ -483,7 +483,7 @@
<div class="tile-subtitle">bruce.banner</div>
</div>
<div class="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-phone"></i></button>
+ <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
</div>
</div>
<div class="tile tile-centered">
@@ -492,12 +492,12 @@
<div class="tile-subtitle">Dayton, Ohio</div>
</div>
<div class="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-map"></i></button>
+ <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
</div>
</div>
</div>
<div class="panel-footer">
- <button class="btn btn-primary btn-block">Edit</button>
+ <button class="btn btn-primary btn-block">Save</button>
</div>
</div>
</div>
@@ -600,7 +600,7 @@
<p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p>
</section>
<div class="columns">
- <div class="column col-8 col-xs-12">
+ <div class="column col-12">
<section class="empty">
<div class="empty-icon">
<i class="icon icon-mail"></i>
@@ -612,7 +612,7 @@
</div>
</section>
</div>
- <div class="column col-8 col-xs-12">
+ <div class="column col-12">
<section class="empty">
<div class="empty-icon">
<i class="icon icon-mail"></i>
@@ -627,7 +627,7 @@
</div>
</section>
</div>
- <div class="column col-8 col-xs-12">
+ <div class="column col-12">
<section class="empty">
<div class="empty-icon">
<i class="icon icon-people"></i>