tags
This commit is contained in:
parent
d634cd6884
commit
ac6724417c
4 changed files with 56 additions and 21 deletions
|
@ -203,7 +203,7 @@
|
|||
images-section {:title "Images"
|
||||
:cards [images]}
|
||||
text-buttons [:div#text-buttons
|
||||
[:h3 "Classic"]
|
||||
[:h3 "Textual buttons"]
|
||||
[:a.tb "tb"]
|
||||
[:a.tb.info "tb info"]
|
||||
[:a.tb.ok "tb ok"]
|
||||
|
@ -211,13 +211,12 @@
|
|||
[:a.tb.err "tb err"]
|
||||
[:a.tb.fatal "tb fatal"]]
|
||||
text-buttons-sizes [:div#text-buttons-sizes
|
||||
[:h3 "Sizes"]
|
||||
[:h4 "Inside some text"]
|
||||
[:div.block "Some text: "
|
||||
[:a {:class "tb sm info"} "Info"]
|
||||
[:a {:class "tb ok"} "OK"]
|
||||
[:a {:class "tb big warn"} "Warn"]
|
||||
[:a {:class "tb huge err"} "ERR"]]]
|
||||
[:h3 "Textual Buttons Sizes"]
|
||||
[:div.block
|
||||
"Some text: " [:a {:class "tb sm info"} "small button"] [:br]
|
||||
"Some text: " [:a {:class "tb ok"} "normal ok"] [:br]
|
||||
"Some text: " [:a {:class "tb big warn"} "big warn"] [:br]
|
||||
"Some text: " [:a {:class "tb huge err"} "huge err"]]]
|
||||
buttons [:div {:id "buttons"}
|
||||
[:h2 "Classic"]
|
||||
[:a {:class "btn"} "btn"]
|
||||
|
@ -257,8 +256,28 @@
|
|||
[:a {:class "btn std huge"} "btn std"]
|
||||
[:a {:class "btn std huge info"} "btn std info"]
|
||||
[:a {:class "btn std huge ok"} "btn std ok"]]]]]
|
||||
tags [:div {:id "tags"}
|
||||
[:h2 "Tags"]
|
||||
[:ul
|
||||
[:li "item-1" [:span.tag "tag"]]
|
||||
[:li "item-2" [:span.tag.info "info"]]
|
||||
[:li "item-3" [:span.tag.ok "ok"]]
|
||||
[:li "item-4" [:span.tag.warn "warn"]]
|
||||
[:li "item-5" [:span.tag.err "err"]]
|
||||
[:li "item-6" [:span.tag.fatal "fatal"]]]]
|
||||
tags-listed [:div {:id "tags-inline"}
|
||||
[:h2 "Inline Tags"]
|
||||
[:span.tag "tag"]
|
||||
[:span.tag.hl "tag hl"]
|
||||
[:span.tag.info "info"]
|
||||
[:span.tag.ok "ok"]
|
||||
[:span.tag.warn "warn"]
|
||||
[:span.tag.err "err"]
|
||||
[:span.tag.fatal "fatal"]
|
||||
]
|
||||
buttons-section {:title "Buttons"
|
||||
:cards [text-buttons text-buttons-sizes buttons]}
|
||||
:cards [tags tags-listed
|
||||
text-buttons text-buttons-sizes buttons]}
|
||||
messages [:div {:class "row"}
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Basic Messages"]
|
||||
|
|
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
35
h/docs.html
35
h/docs.html
|
@ -1012,19 +1012,34 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="Buttons"><a href="#Buttons"><i class="ico">§</i></a> Buttons</h2><div class="row"><div class="card c6"><div id="text-buttons"><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a></div><details><summary>code</summary><pre>
|
||||
<div id="text-buttons">
|
||||
<h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb
|
||||
info</a><a class="tb ok">tb ok</a><a class="tb warn">tb
|
||||
warn</a><a class="tb err">tb err</a><a class="tb fatal">tb
|
||||
fatal</a>
|
||||
</pre></details></div></div></div><div class="col"><h2 id="Buttons"><a href="#Buttons"><i class="ico">§</i></a> Buttons</h2><div class="row"><div class="card c6"><div id="tags"><h2>Tags</h2><ul><li>item-1<span class="tag">tag</span></li><li>item-2<span class="tag info">info</span></li><li>item-3<span class="tag ok">ok</span></li><li>item-4<span class="tag warn">warn</span></li><li>item-5<span class="tag err">err</span></li><li>item-6<span class="tag fatal">fatal</span></li></ul></div><details><summary>code</summary><pre>
|
||||
<div id="tags">
|
||||
<h2>Tags</h2>
|
||||
<ul>
|
||||
<li>item-1<span class="tag">tag</span></li>
|
||||
<li>item-2<span class="tag info">info</span></li>
|
||||
<li>item-3<span class="tag ok">ok</span></li>
|
||||
<li>item-4<span class="tag warn">warn</span></li>
|
||||
<li>item-5<span class="tag err">err</span></li>
|
||||
<li>item-6<span class="tag fatal">fatal</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div id="text-buttons-sizes"><h3>Sizes</h3><h4>Inside some text</h4><div class="block">Some text: <a class="tb sm info">Info</a><a class="tb ok">OK</a><a class="tb big warn">Warn</a><a class="tb huge err">ERR</a></div></div><details><summary>code</summary><pre>
|
||||
</pre></details></div><div class="card c6"><div id="tags-inline"><h2>Inline Tags</h2><span class="tag">tag</span><span class="tag hl">tag hl</span><span class="tag info">info</span><span class="tag ok">ok</span><span class="tag warn">warn</span><span class="tag err">err</span><span class="tag fatal">fatal</span></div><details><summary>code</summary><pre>
|
||||
<div id="tags-inline">
|
||||
<h2>Inline Tags</h2><span class="tag">tag</span><span class="tag hl">tag hl</span><span class="tag info">info</span><span class="tag ok">ok</span><span class="tag warn">warn</span><span class="tag err">err</span><span class="tag fatal">fatal</span>
|
||||
</div>
|
||||
</pre></details></div></div><div class="row"><div class="card c6"><div id="text-buttons"><h3>Textual buttons</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a></div><details><summary>code</summary><pre>
|
||||
<div id="text-buttons">
|
||||
<h3>Textual buttons</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div id="text-buttons-sizes"><h3>Textual Buttons Sizes</h3><div class="block">Some text: <a class="tb sm info">small button</a><br />Some text: <a class="tb ok">normal ok</a><br />Some text: <a class="tb big warn">big warn</a><br />Some text: <a class="tb huge err">huge err</a></div></div><details><summary>code</summary><pre>
|
||||
<div id="text-buttons-sizes">
|
||||
<h3>Sizes</h3>
|
||||
<h4>Inside some text</h4>
|
||||
<h3>Textual Buttons Sizes</h3>
|
||||
<div class="block">
|
||||
Some text: <a class="tb sm info">Info</a><a class="tb ok">OK</a><a class="tb big warn">Warn</a><a class="tb huge err">ERR</a>
|
||||
Some text: <a class="tb sm info">small button</a><br></br>
|
||||
Some text: <a class="tb ok">normal ok</a><br></br>
|
||||
Some text: <a class="tb big warn">big warn</a><br></br>
|
||||
Some text: <a class="tb huge err">huge err</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div><div class="row"><div class="card c6"><div id="buttons"><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div></div><details><summary>code</summary><pre>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.tb, .btn { text-decoration: none; display: inline-block; text-align: center;}
|
||||
.tb, .btn, .tag { text-decoration: none; display: inline-block; text-align: center;}
|
||||
.tb { font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
|
@ -39,3 +39,4 @@
|
|||
.btn.big.std { width: 20rem; }
|
||||
.btn.huge.std { width: 24rem; }
|
||||
|
||||
.tag { padding: 2px; font-size: 0.875rem; border: solid 1px; }
|
||||
|
|
Loading…
Reference in a new issue