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"
|
images-section {:title "Images"
|
||||||
:cards [images]}
|
:cards [images]}
|
||||||
text-buttons [:div#text-buttons
|
text-buttons [:div#text-buttons
|
||||||
[:h3 "Classic"]
|
[:h3 "Textual buttons"]
|
||||||
[:a.tb "tb"]
|
[:a.tb "tb"]
|
||||||
[:a.tb.info "tb info"]
|
[:a.tb.info "tb info"]
|
||||||
[:a.tb.ok "tb ok"]
|
[:a.tb.ok "tb ok"]
|
||||||
|
@ -211,13 +211,12 @@
|
||||||
[:a.tb.err "tb err"]
|
[:a.tb.err "tb err"]
|
||||||
[:a.tb.fatal "tb fatal"]]
|
[:a.tb.fatal "tb fatal"]]
|
||||||
text-buttons-sizes [:div#text-buttons-sizes
|
text-buttons-sizes [:div#text-buttons-sizes
|
||||||
[:h3 "Sizes"]
|
[:h3 "Textual Buttons Sizes"]
|
||||||
[:h4 "Inside some text"]
|
[:div.block
|
||||||
[:div.block "Some text: "
|
"Some text: " [:a {:class "tb sm info"} "small button"] [:br]
|
||||||
[:a {:class "tb sm info"} "Info"]
|
"Some text: " [:a {:class "tb ok"} "normal ok"] [:br]
|
||||||
[:a {:class "tb ok"} "OK"]
|
"Some text: " [:a {:class "tb big warn"} "big warn"] [:br]
|
||||||
[:a {:class "tb big warn"} "Warn"]
|
"Some text: " [:a {:class "tb huge err"} "huge err"]]]
|
||||||
[:a {:class "tb huge err"} "ERR"]]]
|
|
||||||
buttons [:div {:id "buttons"}
|
buttons [:div {:id "buttons"}
|
||||||
[:h2 "Classic"]
|
[:h2 "Classic"]
|
||||||
[:a {:class "btn"} "btn"]
|
[:a {:class "btn"} "btn"]
|
||||||
|
@ -257,8 +256,28 @@
|
||||||
[:a {:class "btn std huge"} "btn std"]
|
[:a {:class "btn std huge"} "btn std"]
|
||||||
[:a {:class "btn std huge info"} "btn std info"]
|
[:a {:class "btn std huge info"} "btn std info"]
|
||||||
[:a {:class "btn std huge ok"} "btn std ok"]]]]]
|
[: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"
|
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"}
|
messages [:div {:class "row"}
|
||||||
[:div {:class "col c6 gapless"}
|
[:div {:class "col c6 gapless"}
|
||||||
[:h2 "Basic Messages"]
|
[: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>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
</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="text-buttons">
|
<div id="tags">
|
||||||
<h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb
|
<h2>Tags</h2>
|
||||||
info</a><a class="tb ok">tb ok</a><a class="tb warn">tb
|
<ul>
|
||||||
warn</a><a class="tb err">tb err</a><a class="tb fatal">tb
|
<li>item-1<span class="tag">tag</span></li>
|
||||||
fatal</a>
|
<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>
|
</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">
|
<div id="text-buttons-sizes">
|
||||||
<h3>Sizes</h3>
|
<h3>Textual Buttons Sizes</h3>
|
||||||
<h4>Inside some text</h4>
|
|
||||||
<div class="block">
|
<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>
|
||||||
</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>
|
</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;
|
.tb { font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
@ -39,3 +39,4 @@
|
||||||
.btn.big.std { width: 20rem; }
|
.btn.big.std { width: 20rem; }
|
||||||
.btn.huge.std { width: 24rem; }
|
.btn.huge.std { width: 24rem; }
|
||||||
|
|
||||||
|
.tag { padding: 2px; font-size: 0.875rem; border: solid 1px; }
|
||||||
|
|
Loading…
Reference in a new issue