diff options
1 files changed, 138 insertions, 126 deletions
| -rw-r--r-- | docs/components.html | 264 |
diff --git a/docs/components.html b/docs/components.html index 08e98ac..b29e04f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -37,7 +37,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -254,9 +254,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> @@ -461,18 +458,18 @@ <span class="chip"> Bruce Banner </span> - <span class="chip"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> Thor Odinson - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> Steve Rogers - </span> - <span class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure> + </div> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> Tony Stark - </span> + </div> <span class="chip active"> Natasha Romanoff </span> @@ -516,7 +513,7 @@ <a href="#autocomplete"> <div class="tile tile-centered"> <div class="tile-icon"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> </div> <div class="tile-content"> Tony <mark>S</mark>tark @@ -540,11 +537,11 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input form-input"</span>> <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">label</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"</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 avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span>> Thor Odinson <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> - <<span class="tag">/label</span>> + <<span class="tag">/div</span>> <span class="com"><!-- autocomplete real input box --></span> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span>> @@ -642,10 +639,10 @@ <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/figure</span>> +<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5755d9;"</span>><<span class="tag">/figure</span>> <span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>> +<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5755d9;"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> </code></pre> @@ -781,8 +778,8 @@ <div class="column col-8 col-xs-12"> <div class="bar"> <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#818bd5;">15%</div> - <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#abb1e2;">10%</div> + <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div> + <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div> <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div> </div> </div> @@ -1072,11 +1069,9 @@ <div class="column col-12"> <span class="chip"> Crime - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <span class="chip"> Drama - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <span class="chip"> Biography @@ -1088,18 +1083,18 @@ </span> </div> <div class="column col-12"> - <span class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> Tony Stark - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> Thor Odinson - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> Steve Rogers - </span> + </div> </div> </div> <div class="docs-note"> @@ -1107,16 +1102,18 @@ </div> <!-- chips --> -<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - Crime +<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>>Crime<<span class="tag">/span</span>> + +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + Biography <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/span</span>> -<<span class="tag">span</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"</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 avatar-sm"</span>> Yan Zhu <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> -<<span class="tag">/span</span>></code> +<<span class="tag">/div</span>></code> </pre> </div> @@ -1130,7 +1127,7 @@ <div class="column col-12"> <div class="empty"> <div class="empty-icon"> - <i class="icon icon-message"></i> + <i class="icon icon-3x icon-mail"></i> </div> <p class="empty-title h5">You have no new messages</p> <p class="empty-subtitle">Click the button to start a conversation</p> @@ -1142,7 +1139,7 @@ <div class="column col-12"> <div class="empty"> <div class="empty-icon"> - <i class="icon icon-mail"></i> + <i class="icon icon-3x icon-mail"></i> </div> <p class="empty-title h5">You've successfully signed up</p> <p class="empty-subtitle">Click the button to invite your friends</p> @@ -1157,7 +1154,7 @@ <div class="column col-12"> <div class="empty"> <div class="empty-icon"> - <i class="icon icon-people"></i> + <i class="icon icon-3x icon-people"></i> </div> <p class="empty-title h5">You are not following anyone</p> <p class="empty-subtitle">Start to meet new friends</p> @@ -1470,26 +1467,6 @@ </div> <div class="modal-body"> <div class="content"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button> - <button class="btn btn-link">Close</button> - </div> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="modal-temp modal-sm"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> <form> <div class="form-group"> <label class="form-label" for="input-example-7">Name</label> @@ -1518,7 +1495,42 @@ </div> </div> <div class="docs-note"> - <p>Add the <code>modal-sm</code> class for a smaller modal dialog. </p> + <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p> + </div> + <div class="columns"> + <div class="column"> + <a href="#example-modal-2" class="btn btn-primary">Open large size Modal</a> + <div class="modal modal-lg" id="example-modal-2"> + <div class="modal-overlay"></div> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button> + <a href="#modals-sizes" class="btn btn-link">Close</a> + </div> + </div> + </div> + </div> + </div> + <div class="docs-note"> + <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p> </div> <!-- modals --> @@ -1532,6 +1544,77 @@ </div> + <div id="navs" class="container"> + <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Elements</a> + </li> + <li class="nav-item active"> + <a href="#nav">Layout</a> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#nav">Responsive</a> + </li> + <li class="nav-item"> + <a href="#nav">Navbar</a> + </li> + <li class="nav-item"> + <a href="#nav">Empty states</a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#nav">Components</a> + </li> + <li class="nav-item"> + <a href="#nav">Utilities</a> + </li> + </ul> + </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> + </div> + +<!-- navs --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Layout<<span class="tag">/a</span>> + <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Flexbox grid<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Responsive<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Navbar<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Empty states<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">/ul</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Components<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + </div> + <div id="pagination" class="container"> <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> <div class="columns"> @@ -1824,77 +1907,6 @@ </div> - <div id="navs" class="container"> - <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Elements</a> - </li> - <li class="nav-item active"> - <a href="#nav">Layout</a> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Flexbox grid</a> - </li> - <li class="nav-item"> - <a href="#nav">Responsive</a> - </li> - <li class="nav-item"> - <a href="#nav">Navbar</a> - </li> - <li class="nav-item"> - <a href="#nav">Empty states</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="#nav">Components</a> - </li> - <li class="nav-item"> - <a href="#nav">Utilities</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> - </div> - -<!-- navs --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Layout<<span class="tag">/a</span>> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Flexbox grid<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Responsive<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Navbar<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Empty states<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Components<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - </div> - <div id="popovers" class="container"> <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> <div class="docs-note"> |