yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

tags

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-24 13:11:47 +02:00
parent d634cd6884
commit ac6724417c
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
4 changed files with 56 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
bb/brut/site.clj
View file

@ -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
View file

File diff suppressed because one or more lines are too long

35
h/docs.html
View file

@ -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>
&lt;div id=&quot;text-buttons&quot;&gt;
&lt;h3&gt;Classic&lt;/h3&gt;&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb
info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb ok&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb
warn&lt;/a&gt;&lt;a class=&quot;tb err&quot;&gt;tb err&lt;/a&gt;&lt;a class=&quot;tb fatal&quot;&gt;tb
fatal&lt;/a&gt;
</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>
&lt;div id=&quot;tags&quot;&gt;
&lt;h2&gt;Tags&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;item-1&lt;span class=&quot;tag&quot;&gt;tag&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-2&lt;span class=&quot;tag info&quot;&gt;info&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-3&lt;span class=&quot;tag ok&quot;&gt;ok&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-4&lt;span class=&quot;tag warn&quot;&gt;warn&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-5&lt;span class=&quot;tag err&quot;&gt;err&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-6&lt;span class=&quot;tag fatal&quot;&gt;fatal&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</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>
&lt;div id=&quot;tags-inline&quot;&gt;
&lt;h2&gt;Inline Tags&lt;/h2&gt;&lt;span class=&quot;tag&quot;&gt;tag&lt;/span&gt;&lt;span class=&quot;tag hl&quot;&gt;tag hl&lt;/span&gt;&lt;span class=&quot;tag info&quot;&gt;info&lt;/span&gt;&lt;span class=&quot;tag ok&quot;&gt;ok&lt;/span&gt;&lt;span class=&quot;tag warn&quot;&gt;warn&lt;/span&gt;&lt;span class=&quot;tag err&quot;&gt;err&lt;/span&gt;&lt;span class=&quot;tag fatal&quot;&gt;fatal&lt;/span&gt;
&lt;/div&gt;
</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>
&lt;div id=&quot;text-buttons&quot;&gt;
&lt;h3&gt;Textual buttons&lt;/h3&gt;&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb ok&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb warn&lt;/a&gt;&lt;a class=&quot;tb err&quot;&gt;tb err&lt;/a&gt;&lt;a class=&quot;tb fatal&quot;&gt;tb fatal&lt;/a&gt;
&lt;/div&gt;
</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>
&lt;div id=&quot;text-buttons-sizes&quot;&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;
&lt;h4&gt;Inside some text&lt;/h4&gt;
&lt;h3&gt;Textual Buttons Sizes&lt;/h3&gt;
&lt;div class=&quot;block&quot;&gt;
Some text: &lt;a class=&quot;tb sm info&quot;&gt;Info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;OK&lt;/a&gt;&lt;a class=&quot;tb big warn&quot;&gt;Warn&lt;/a&gt;&lt;a class=&quot;tb huge err&quot;&gt;ERR&lt;/a&gt;
Some text: &lt;a class=&quot;tb sm info&quot;&gt;small button&lt;/a&gt;&lt;br&gt;&lt;/br&gt;
Some text: &lt;a class=&quot;tb ok&quot;&gt;normal ok&lt;/a&gt;&lt;br&gt;&lt;/br&gt;
Some text: &lt;a class=&quot;tb big warn&quot;&gt;big warn&lt;/a&gt;&lt;br&gt;&lt;/br&gt;
Some text: &lt;a class=&quot;tb huge err&quot;&gt;huge err&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</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">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;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">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;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>

3
src/buttons.less
View file

@ -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; }