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

Added better size rules

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-10-24 17:05:36 +02:00
parent ac6724417c
commit 19641e9561
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
9 changed files with 53 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -3,3 +3,4 @@
/sass/.sass-cache/
_build/
.direnv/
.clj-kondo

25
bb/brut/site.clj
View file

@ -318,12 +318,19 @@
messages-section {:title "Messages"
:cards [messages]}
forms [:div
[:input {:class "neutral", :type "text", :placeholder "input"}]
[:label {:for "example1"}]
[:input#example1 {:type "text" :placeholder "text input"}]
[:br]
[:br]
[:label {:for "textarea1"}]
[:textarea#textarea1 {:cols "30" :rows "3", :placeholder "textarea"}]
[:br]
[:br]
[:div.form-block
[:span {:class "addon info"} "$"]
[:input {:type "text" :placeholder "with addon"}]]
[:br]
[:textarea {:class "neutral", :rows "3", :placeholder "textarea"}]
[:br]
[:span {:class "addon bg-info"} "$"]
[:input {:type "text"}]
[:div {:class "msg"}
[:strong "Be careful with addons!"]
" If you do not want a space between the addon and the input make sure "
@ -331,11 +338,13 @@
[:code "<span>"] " and "
[:code "<input>"]" tags. Example: "
[:pre "... </span>" [:span.hl " "] "<input ..."]
[:span {:class "addon"} "$"] " "
[:input {:type "text", :class "smooth"}]
[:div.form-block
[:span {:class "addon"} "$"] " "
[:input {:type "text", :class "smooth"}]]
[:pre "... </span><input ..."]
[:span {:class "addon"} "$"]
[:input {:type "text", :class "smooth"}]]]
[:div.form-block
[:span {:class "addon"} "$"]
[:input {:type "text", :class "smooth"}]]]]
forms-section {:title "Forms"
:cards [forms]}
navbar [:div {:class "navbar"}

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

24
h/docs.html
View file

@ -966,19 +966,29 @@
Just a bunch of a few more unicode icons.
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Forms"><a href="#Forms"><i class="ico">§</i></a> Forms</h2><div class="row"><div class="card c6"><div><input class="neutral" placeholder="input" type="text" /><br /><textarea class="neutral" placeholder="textarea" rows="3"></textarea><br /><span class="addon bg-info">$</span><input type="text" /><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code>&lt;span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><span class="addon">$</span> <input class="smooth" type="text" /><pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><details><summary>code</summary><pre>
</pre></details></div></div></div><div class="col"><h2 id="Forms"><a href="#Forms"><i class="ico">§</i></a> Forms</h2><div class="row"><div class="card c6"><div><label for="example1"></label><input id="example1" placeholder="text input" type="text" /><br /><br /><label for="textarea1"></label><textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br /><br /><div class="form-block"><span class="addon info">$</span><input placeholder="with addon" type="text" /></div><br /><br /><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code>&lt;span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><div class="form-block"><span class="addon">$</span> <input class="smooth" type="text" /></div><pre>... &lt;/span&gt;&lt;input ...</pre><div class="form-block"><span class="addon">$</span><input class="smooth" type="text" /></div></div></div><details><summary>code</summary><pre>
&lt;div&gt;
&lt;input class=&quot;neutral&quot; placeholder=&quot;input&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;br&gt;&lt;/br&gt;
&lt;textarea class=&quot;neutral&quot; placeholder=&quot;textarea&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/br&gt;
&lt;span class=&quot;addon bg-info&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;input id=&quot;example1&quot; placeholder=&quot;text input&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;br&gt;&lt;/br&gt;
&lt;br&gt;&lt;/br&gt;
&lt;textarea cols=&quot;30&quot; id=&quot;textarea1&quot; placeholder=&quot;textarea&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/br&gt;
&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;form-block&quot;&gt;
&lt;span class=&quot;addon info&quot;&gt;$&lt;/span&gt;&lt;input placeholder=&quot;with addon&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;msg&quot;&gt;
&lt;strong&gt;Be careful with addons!&lt;/strong&gt; If you do not want a
space between the addon and the input make sure that there is
no space between the &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; and
&lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; tags. Example:
&lt;pre&gt;... &amp;lt;/span&amp;gt;&lt;span class=&quot;hl&quot;&gt; &lt;/span&gt;&amp;lt;input ...&lt;/pre&gt;&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;
&lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;pre&gt;... &amp;lt;/span&amp;gt;&amp;lt;input ...&lt;/pre&gt;&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;pre&gt;... &amp;lt;/span&amp;gt;&lt;span class=&quot;hl&quot;&gt; &lt;/span&gt;&amp;lt;input ...&lt;/pre&gt;
&lt;div class=&quot;form-block&quot;&gt;
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt; &lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;/div&gt;
&lt;pre&gt;... &amp;lt;/span&amp;gt;&amp;lt;input ...&lt;/pre&gt;
&lt;div class=&quot;form-block&quot;&gt;
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Tables"><a href="#Tables"><i class="ico">§</i></a> Tables</h2><div class="row"><div class="card c6"><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><details><summary>code</summary><pre>

2
src/buttons.less
View file

@ -39,4 +39,4 @@
.btn.big.std { width: 20rem; }
.btn.huge.std { width: 24rem; }
.tag { padding: 2px; font-size: 0.875rem; border: solid 1px; }
.tag { padding: 2px; font-size: 0.875rem; border: solid 1px var(--fg); margin: 0 1px; }

16
src/colors.less
View file

@ -39,11 +39,11 @@ a { color: var(--fg); }
p > a, li > a { color: var(--accent); }
.msg, .btn { background-color: var(--bg2) }
.b, .info { color: var(--bg); background-color: var(--b); }
.g, .ok { color: var(--bg); background-color: var(--g); }
.y, .warn { color: var(--bg); background-color: var(--y); }
.r, .err { color: var(--bg); background-color: var(--r); }
.m, .fatal { color: var(--bg); background-color: var(--m); }
.o { color: var(--bg); background-color: var(--o); }
.v { color: var(--bg); background-color: var(--v); }
.c { color: var(--bg); background-color: var(--c); }
.b, .info { color: var(--bg); background-color: var(--b); border-color: var(--fg); }
.g, .ok { color: var(--bg); background-color: var(--g); border-color: var(--fg); }
.y, .warn { color: var(--bg); background-color: var(--y); border-color: var(--fg); }
.r, .err { color: var(--bg); background-color: var(--r); border-color: var(--fg); }
.m, .fatal { color: var(--bg); background-color: var(--m); border-color: var(--fg); }
.o { color: var(--bg); background-color: var(--o); border-color: var(--fg); }
.v { color: var(--bg); background-color: var(--v); border-color: var(--fg); }
.c { color: var(--bg); background-color: var(--c); border-color: var(--fg); }

1
src/components.less
View file

@ -2,6 +2,7 @@
.card, .block {
padding: 1rem;
border: solid 1rem;
overflow: hidden;
}
.col.card, .col.block {
justify-content: flex-start;

7
src/forms.less
View file

@ -9,7 +9,7 @@ form > * {
textarea, input, select {
border: 2px solid;
padding: 8px;
padding: 2px;
}
textarea, input[type=text] {
@ -20,7 +20,7 @@ textarea, input[type=text] {
}
.addon {
padding: 8px 12px;
padding: 2px 2px;
border-width: 2px;
border-style: solid none solid solid;
}
@ -28,3 +28,6 @@ textarea, input[type=text] {
textarea:focus, input:focus, select:focus {
border-color: var(--accent);
}
.form-block:focus-within .addon {
border-color: var(--accent);
}

4
src/grid.less
View file

@ -10,8 +10,8 @@
}
.row > * { flex: 1; }
.col > * { flex: 0; }
.row > * { flex: 1; max-height: 100%; }
.col > * { flex: 0; max-width: 100%; }
.col {
flex-direction: column;
}