Added better size rules
This commit is contained in:
parent
ac6724417c
commit
19641e9561
9 changed files with 53 additions and 29 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -3,3 +3,4 @@
|
||||||
/sass/.sass-cache/
|
/sass/.sass-cache/
|
||||||
_build/
|
_build/
|
||||||
.direnv/
|
.direnv/
|
||||||
|
.clj-kondo
|
||||||
|
|
|
@ -318,12 +318,19 @@
|
||||||
messages-section {:title "Messages"
|
messages-section {:title "Messages"
|
||||||
:cards [messages]}
|
:cards [messages]}
|
||||||
forms [:div
|
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]
|
[:br]
|
||||||
[:textarea {:class "neutral", :rows "3", :placeholder "textarea"}]
|
|
||||||
[:br]
|
[:br]
|
||||||
[:span {:class "addon bg-info"} "$"]
|
|
||||||
[:input {:type "text"}]
|
|
||||||
[:div {:class "msg"}
|
[:div {:class "msg"}
|
||||||
[:strong "Be careful with addons!"]
|
[:strong "Be careful with addons!"]
|
||||||
" If you do not want a space between the addon and the input make sure "
|
" If you do not want a space between the addon and the input make sure "
|
||||||
|
@ -331,11 +338,13 @@
|
||||||
[:code "<span>"] " and "
|
[:code "<span>"] " and "
|
||||||
[:code "<input>"]" tags. Example: "
|
[:code "<input>"]" tags. Example: "
|
||||||
[:pre "... </span>" [:span.hl " "] "<input ..."]
|
[:pre "... </span>" [:span.hl " "] "<input ..."]
|
||||||
|
[:div.form-block
|
||||||
[:span {:class "addon"} "$"] " "
|
[:span {:class "addon"} "$"] " "
|
||||||
[:input {:type "text", :class "smooth"}]
|
[:input {:type "text", :class "smooth"}]]
|
||||||
[:pre "... </span><input ..."]
|
[:pre "... </span><input ..."]
|
||||||
|
[:div.form-block
|
||||||
[:span {:class "addon"} "$"]
|
[:span {:class "addon"} "$"]
|
||||||
[:input {:type "text", :class "smooth"}]]]
|
[:input {:type "text", :class "smooth"}]]]]
|
||||||
forms-section {:title "Forms"
|
forms-section {:title "Forms"
|
||||||
:cards [forms]}
|
:cards [forms]}
|
||||||
navbar [:div {:class "navbar"}
|
navbar [:div {:class "navbar"}
|
||||||
|
|
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
24
h/docs.html
24
h/docs.html
|
@ -966,19 +966,29 @@
|
||||||
Just a bunch of a few more unicode icons.
|
Just a bunch of a few more unicode icons.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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><span></code> and <code><input></code> tags. Example: <pre>... </span><span class="hl"> </span><input ...</pre><span class="addon">$</span> <input class="smooth" type="text" /><pre>... </span><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><span></code> and <code><input></code> tags. Example: <pre>... </span><span class="hl"> </span><input ...</pre><div class="form-block"><span class="addon">$</span> <input class="smooth" type="text" /></div><pre>... </span><input ...</pre><div class="form-block"><span class="addon">$</span><input class="smooth" type="text" /></div></div></div><details><summary>code</summary><pre>
|
||||||
<div>
|
<div>
|
||||||
<input class="neutral" placeholder="input" type="text"></input><br></br>
|
<input id="example1" placeholder="text input" type="text"></input><br></br>
|
||||||
<textarea class="neutral" placeholder="textarea" rows="3"></textarea><br></br>
|
<br></br>
|
||||||
<span class="addon bg-info">$</span><input type="text"></input>
|
<textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br></br>
|
||||||
|
<br></br>
|
||||||
|
<div class="form-block">
|
||||||
|
<span class="addon info">$</span><input placeholder="with addon" type="text"></input>
|
||||||
|
</div><br></br>
|
||||||
|
<br></br>
|
||||||
<div class="msg">
|
<div class="msg">
|
||||||
<strong>Be careful with addons!</strong> If you do not want a
|
<strong>Be careful with addons!</strong> If you do not want a
|
||||||
space between the addon and the input make sure that there is
|
space between the addon and the input make sure that there is
|
||||||
no space between the <code>&lt;span&gt;</code> and
|
no space between the <code>&lt;span&gt;</code> and
|
||||||
<code>&lt;input&gt;</code> tags. Example:
|
<code>&lt;input&gt;</code> tags. Example:
|
||||||
<pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><span class="addon">$</span>
|
<pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre>
|
||||||
<input class="smooth" type="text"></input>
|
<div class="form-block">
|
||||||
<pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text"></input>
|
<span class="addon">$</span> <input class="smooth" type="text"></input>
|
||||||
|
</div>
|
||||||
|
<pre>... &lt;/span&gt;&lt;input ...</pre>
|
||||||
|
<div class="form-block">
|
||||||
|
<span class="addon">$</span><input class="smooth" type="text"></input>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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>
|
||||||
|
|
|
@ -39,4 +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; }
|
.tag { padding: 2px; font-size: 0.875rem; border: solid 1px var(--fg); margin: 0 1px; }
|
||||||
|
|
|
@ -39,11 +39,11 @@ a { color: var(--fg); }
|
||||||
p > a, li > a { color: var(--accent); }
|
p > a, li > a { color: var(--accent); }
|
||||||
|
|
||||||
.msg, .btn { background-color: var(--bg2) }
|
.msg, .btn { background-color: var(--bg2) }
|
||||||
.b, .info { color: var(--bg); background-color: var(--b); }
|
.b, .info { color: var(--bg); background-color: var(--b); border-color: var(--fg); }
|
||||||
.g, .ok { color: var(--bg); background-color: var(--g); }
|
.g, .ok { color: var(--bg); background-color: var(--g); border-color: var(--fg); }
|
||||||
.y, .warn { color: var(--bg); background-color: var(--y); }
|
.y, .warn { color: var(--bg); background-color: var(--y); border-color: var(--fg); }
|
||||||
.r, .err { color: var(--bg); background-color: var(--r); }
|
.r, .err { color: var(--bg); background-color: var(--r); border-color: var(--fg); }
|
||||||
.m, .fatal { color: var(--bg); background-color: var(--m); }
|
.m, .fatal { color: var(--bg); background-color: var(--m); border-color: var(--fg); }
|
||||||
.o { color: var(--bg); background-color: var(--o); }
|
.o { color: var(--bg); background-color: var(--o); border-color: var(--fg); }
|
||||||
.v { color: var(--bg); background-color: var(--v); }
|
.v { color: var(--bg); background-color: var(--v); border-color: var(--fg); }
|
||||||
.c { color: var(--bg); background-color: var(--c); }
|
.c { color: var(--bg); background-color: var(--c); border-color: var(--fg); }
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
.card, .block {
|
.card, .block {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border: solid 1rem;
|
border: solid 1rem;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.col.card, .col.block {
|
.col.card, .col.block {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
|
@ -9,7 +9,7 @@ form > * {
|
||||||
|
|
||||||
textarea, input, select {
|
textarea, input, select {
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
padding: 8px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea, input[type=text] {
|
textarea, input[type=text] {
|
||||||
|
@ -20,7 +20,7 @@ textarea, input[type=text] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.addon {
|
.addon {
|
||||||
padding: 8px 12px;
|
padding: 2px 2px;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-style: solid none solid solid;
|
border-style: solid none solid solid;
|
||||||
}
|
}
|
||||||
|
@ -28,3 +28,6 @@ textarea, input[type=text] {
|
||||||
textarea:focus, input:focus, select:focus {
|
textarea:focus, input:focus, select:focus {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
.form-block:focus-within .addon {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
|
@ -10,8 +10,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.row > * { flex: 1; }
|
.row > * { flex: 1; max-height: 100%; }
|
||||||
.col > * { flex: 0; }
|
.col > * { flex: 0; max-width: 100%; }
|
||||||
.col {
|
.col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue