diff options
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.html | 11 | ||||
| -rw-r--r-- | docs/css/spectre-icons.css | 170 | ||||
| -rw-r--r-- | docs/css/spectre-icons.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 56 | ||||
| -rw-r--r-- | docs/index.html | 4 | ||||
| -rw-r--r-- | docs/layout.html | 14 |
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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-explore centered"</span>><<span class="tag">/i</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-file centered"</span>><<span class="tag">/i</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> @@ -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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-explore centered"</span>><<span class="tag">/i</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-file centered"</span>><<span class="tag">/i</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> @@ -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 <head> 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><<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"dist/spectre.min.css"</span> /> <<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"dist/spectre-exp.min.css"</span> /> +<<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"dist/spectre-icons.min.css"</span> /> </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> |