diff options
Add: Tiles component and many bugs fixed
4 files changed, 195 insertions, 110 deletions
| -rw-r--r-- | docs/components.html | 268 | ||||
| -rw-r--r-- | docs/css/docs.less | 28 | ||||
| -rw-r--r-- | docs/css/docs.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 7 |
diff --git a/docs/components.html b/docs/components.html index 4a18277..7ae98cb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -68,6 +68,9 @@ <a href="components.html#navigation">Navigation</a> </li> <li class="nav-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="nav-item"> <a href="components.html#toasts">Toasts</a> </li> <li class="nav-item"> @@ -87,30 +90,30 @@ <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p> </section> <div class="columns"> - <div class="column col-9 col-xs-12"> + <div class="column col-8 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> <div class="form-autocomplete-input"> - <div class="chip-sm"> + <div class="chip"> Bruce Banner <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar" /> Thor Odinson <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-4.png" class="avatar" /> Steve Rogers <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> Tony Stark <button class="btn btn-clear"></button> </div> - <div class="chip-sm selected"> + <div class="chip is-selected"> Natasha Romanoff <button class="btn btn-clear"></button> </div> @@ -119,16 +122,16 @@ </div> </div> </div> - <div class="column col-9 col-xs-12"> + <div class="column col-8 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> + <div class="form-autocomplete-input is-focused"> + <div class="chip"> Bruce Banner <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> - <img src="img/avatar-1.png" class="avatar" /> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar" alt="Thor Odinson"/> Thor Odinson <button class="btn btn-clear"></button> </div> @@ -137,21 +140,21 @@ <ul class="menu"> <li class="menu-item"> <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> - <img src="img/avatar-4.png" class="avatar avatar-sm" /> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" /> </div> - <div class="chip-content"> + <div class="tile-content"> Steve Rogers </div> </div> </a> <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> + <div class="tile tile-centered"> + <div class="tile-icon"> <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #A2A8E1;"></figure> </div> - <div class="chip-content"> + <div class="tile-content"> Tony Stark </div> </div> @@ -163,8 +166,8 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. </p> - <p>The autocomplete HTML structure is exampled below.</p> + <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the class <code>is-focus</code> to <code>form-autocomplete-input</code> to make it appear as focus state.</p> + <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p> </section> <!-- autocomplete example --> @@ -173,14 +176,9 @@ <span class="com"><!-- autocomplete input container --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm selected"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-2.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip is-selected"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> + Thor Odinson <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> <<span class="tag">/div</span>> <span class="com"><!-- autocomplete real input box --></span> @@ -191,11 +189,11 @@ <span class="com"><!-- menu list chips --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> + <<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">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Steve Rogers"</span> /> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> Steve Rogers <<span class="tag">/div</span>> <<span class="tag">/div</span>> @@ -203,11 +201,11 @@ <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> + <<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">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Yan Zhu"</span> /> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> Yan Zhu <<span class="tag">/div</span>> <<span class="tag">/div</span>> @@ -357,22 +355,22 @@ <img class="img-responsive" src="img/osx-el-capitan.jpg" /> </div> <div class="card-header"> - <h4 class="card-title">Microsoft</h4> - <h6 class="card-meta">Software and hardware</h6> + <div class="card-title">Microsoft</div> + <div class="card-meta">Software and hardware</div> </div> <div class="card-body"> Empower every person and every organization on the planet to achieve more. </div> <div class="card-footer"> - <a href="#" class="btn btn-primary">Do</a> + <a href="#cards" class="btn btn-primary">Do</a> </div> </div> </div> <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> + <div class="card-title">Apple</div> + <div class="card-meta">Hardware and software</div> </div> <div class="card-image"> <img class="img-responsive" src="img/osx-yosemite.jpg" /> @@ -392,8 +390,8 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Google</h4> - <h6 class="card-meta">Software and hardware</h6> + <div class="card-title">Google</div> + <div class="card-meta">Software and hardware</div> </div> <div class="card-body"> Organize the world’s information and make it universally accessible and useful. @@ -402,8 +400,8 @@ <img class="img-responsive" src="img/osx-yosemite-2.jpg" /> </div> <div class="card-footer"> - <a href="#" class="btn btn-primary">Search</a> - <a href="#" class="btn btn-link">Share</a> + <a href="#cards" class="btn btn-primary">Search</a> + <a href="#cards" class="btn btn-link">Share</a> </div> </div> </div> @@ -413,8 +411,8 @@ <img class="img-responsive" src="img/osx-el-capitan.jpg" /> </div> <div class="card-footer"> - <a href="#" class="btn btn-primary">Buy</a> - <a href="#" class="btn btn-link">Share</a> + <a href="#cards" class="btn btn-primary">Buy</a> + <a href="#cards" class="btn btn-link">Share</a> </div> <div class="card-body"> <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. @@ -425,8 +423,8 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> + <div class="card-title">Apple</div> + <div class="card-meta">Hardware and software</div> </div> <div class="card-body"> To make a contribution to the world by making tools for the mind that advance humankind. @@ -439,22 +437,19 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Google I/O</h4> - </div> - <div class="card-body"> - An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. - </div> - <div class="card-footer"> - <div class="chip"> - <div class="chip-content"> - <div class="chip-title">Google</div> - <div class="chip-meta">Software and hardware</div> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">Google I/O</div> + <div class="tile-meta">Software and hardware</div> </div> - <div class="chip-action"> + <div class="tile-action"> <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> </div> </div> </div> + <div class="card-body"> + An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. + </div> </div> </div> </div> @@ -488,35 +483,35 @@ </section> <div class="columns"> <div class="column col-8 col-xs-12"> - <div class="chip-sm"> + <div class="chip"> Crime <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> Drama <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> Biography <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> Mystery <button class="btn btn-clear"></button> </div> </div> <div class="column col-8 col-xs-12"> - <div class="chip-sm"> + <div class="chip"> <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> Tony Stark <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar" /> Thor Odinson <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-4.png" class="avatar" /> Steve Rogers </div> @@ -524,34 +519,17 @@ </div> <section class="notes"> - <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> + <p>Add a container element with the class <code>chip</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> </section> - <div class="columns hide"> - <div class="column col-4 col-xs-12"> - <div class="chip"> - <div class="chip-icon"> - <img src="img/avatar-1.png" class="avatar" /> - </div> - <div class="chip-content"> - <div class="chip-title">Tony Stark</div> - <div class="chip-meta">Iron man</div> - </div> - <div class="chip-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> - </div> - </div> - <!-- chips example --> <pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> Crime <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> <<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> Yan Zhu <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> @@ -689,11 +667,11 @@ <div class="column col-xs-6"> <ul class="menu"> <li class="menu-item"> - <div class="chip"> - <div class="chip-icon"> + <div class="tile tile-centered"> + <div class="tile-icon"> <img src="img/avatar-4.png" class="avatar" /> </div> - <div class="chip-content"> + <div class="tile-content"> Steve Rogers </div> </div> @@ -924,7 +902,7 @@ </section> <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header> <div class="columns"> - <div class="column"> + <div class="column col-8 col-sm-12"> <ul class="breadcrumb"> <li class="breadcrumb-item"> <a href="#breadcrumbs"> @@ -1121,7 +1099,7 @@ <div class="column col-xs-12"> <ul class="pagination"> <li class="page-item"> - <a href="#pagination" disabled>Previous</a> + <a href="#pagination" disabled tabindex="-1">Previous</a> </li> <li class="page-item active"> <a href="#pagination">1</a> @@ -1151,7 +1129,7 @@ <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</span>>Previous<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>Previous<<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>1<<span class="tag">/a</span>> @@ -1212,6 +1190,110 @@ </section> </section> + <section id="tiles" class="container"> + <header class="text-center"><h3>Tiles</h3></header> + <section class="notes"> + <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p> + </section> + <div class="columns"> + <div class="column col-sm-12 col-8"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-3.png" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The Avengers</p> + <p>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + <div class="tile-action"> + <button class="btn btn-primary">Join</button> + </div> + </div> + </div> + <div class="column col-sm-12 col-8"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The S.H.I.E.L.D.</p> + <p>The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + <p><button class="btn btn-primary btn-sm">Join</button></p> + </div> + </div> + </div> + </div> + <section class="notes"> + <p>Add a container with the class <code>tile</code>. And add child elements with the class name <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code>. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> + <p>There are <code>tile-title</code> and <code>tile-meta</code> classes for title and meta text styles.</p> + </section> + +<!-- tiles example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"tile-title"</span>>The Avengers<<span class="tag">/p</span>> + <<span class="tag">p</span>>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...<<span class="tag">/p</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Join<<span class="tag">/button</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>></code> +</pre> + + <section class="notes"> + <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> + <p>Add the class <code>tile-centered</code> to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> + </section> + <div class="columns"> + <div class="column col-sm-12 col-8"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-explore centered"></i> + </div> + </div> + <div class="tile-content"> + <div class="tile-title text-ellipsis">spectre-docs.pdf</div> + <div class="tile-meta text-ellipsis">14MB · Public · 1 Jan, 2017</div> + </div> + <div class="tile-action"> + <button class="btn btn-link"><i class="icon icon-more_vert"></i></button> + </div> + </div> + </div> + </div> + +<!-- tiles example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-title text-ellipsis"</span>>spectre-docs.pdf<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-meta text-ellipsis"</span>>14MB · Public · 1 Jan, 2017<<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-more_vert"</span>><<span class="tag">/i</span>> + <<span class="tag">/button</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>></code> +</pre> + </section> + <section id="toasts" class="container"> <header class="text-center"><h3>Toasts</h3></header> <section class="notes"> diff --git a/docs/css/docs.less b/docs/css/docs.less index e5d0f12..885401c 100644 --- a/docs/css/docs.less +++ b/docs/css/docs.less @@ -136,6 +136,18 @@ header { margin-bottom: 2rem; } +.example-tile-icon { + align-content: space-around; + align-items: center; + background: #5764c6; + border-radius: .2rem; + color: #fff; + display: flex; + font-size: 2.4rem; + height: 4rem; + width: 4rem; +} + @media screen and (min-width: 480px) { .docs-sidebar { padding: 7rem 0; @@ -148,18 +160,12 @@ header { .docs-nav { position: sticky; top: 5rem; - } - } - .docs-backtotop { - bottom: 5rem; - display: none; - padding: 0 1rem; - position: fixed; - z-index: 49; - } - .docs-backtotop a { - color: #666; + // A position: sticky; bug casues box-shadow generates width to the elements + .nav-item a:focus { + box-shadow: none; + } + } } } } diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css index 781227b..0a9865e 100644 --- a/docs/css/docs.min.css +++ b/docs/css/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand{font-size:1.6rem;font-weight:500;padding-right:2rem;text-decoration:none;vertical-align:middle}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;margin-right:.2rem;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.notes{color:#666;margin:4rem 0}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}header{padding-top:3rem}.docs-content header>h3,.docs-content header>h4,.docs-content header>h5{margin-bottom:2rem;margin-top:4rem}@media screen and (min-width:480px){.docs-sidebar{padding:7rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:5rem}}.docs-sidebar .docs-backtotop{bottom:5rem;display:none;padding:0 1rem;position:fixed;z-index:49}.docs-sidebar .docs-backtotop a{color:#666}}
\ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand{font-size:1.6rem;font-weight:500;padding-right:2rem;text-decoration:none;vertical-align:middle}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;margin-right:.2rem;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.notes{color:#666;margin:4rem 0}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}header{padding-top:3rem}.docs-content header>h3,.docs-content header>h4,.docs-content header>h5{margin-bottom:2rem;margin-top:4rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:480px){.docs-sidebar{padding:7rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:5rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}
\ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index 1b3056c..7d4fd42 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -64,9 +64,6 @@ <a href="utilities.html">Utilities</a> </li> </ul> - <div class="docs-backtotop hide-xs"> - <a href="#">Back to top</a> - </div> </div> <div class="docs-content column col-9 col-sm-12"> <section id="typography" class="container"> @@ -320,7 +317,7 @@ </table> <section class="notes"> <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p> - <p>Use the class <code>selected</code> to make <tr> element highlighted. </p> + <p>Use the class <code>is-selected</code> to make <tr> element highlighted. </p> </section> <!-- tables example --> @@ -335,7 +332,7 @@ <<span class="tag">/tr</span>> <<span class="tag">/thead</span>> <<span class="tag">tbody</span>> - <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"selected"</span>> + <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"is-selected"</span>> <<span class="tag">td</span>>The Shawshank Redemption<<span class="tag">/td</span>> <<span class="tag">td</span>>2h 22min<<span class="tag">/td</span>> <<span class="tag">td</span>>Crime, Drama<<span class="tag">/td</span>> |