Skip to content

Commit

Permalink
feat: add component checkbox input
Browse files Browse the repository at this point in the history
  • Loading branch information
@matifandy8
matifandy8 committed Oct 14, 2023
1 parent b1344d7 commit 0bebc63
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 33 deletions.
32 changes: 32 additions & 0 deletions dist/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -648,3 +648,35 @@ html {
max-width: 100%;
vertical-align: middle;
display: inline-block; }

.nb-label {
cursor: pointer;
display: flex;
align-items: center;
font-family: "Public Sans", sans-serif;
font-size: 1rem;
color: black;
text-transform: uppercase; }

input.nb-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background-color: #fff;
border: 2px solid black;
border-radius: 4px;
cursor: pointer; }
input.nb-checkbox:checked {
background-color: #007bff;
color: #fff; }
input.nb-checkbox:checked::before {
content: "x";
font-weight: bold;
color: inherit;
left: 5px;
position: relative;
top: 0px;
font-size: 18px;
text-align: center; }
37 changes: 37 additions & 0 deletions src/scss/components/_checkbox.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.nb-label {
cursor: pointer;
display: flex;
align-items: center;
font-family: "Public Sans", sans-serif;
font-size: 1rem;
color: black;
text-transform: uppercase;
}

input.nb-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background-color: #fff;
border: 2px solid black;
border-radius: 4px;
cursor: pointer;

&:checked {
background-color: #007bff;
color: #fff;

&::before {
content: "x";
font-weight: bold;
color: inherit;
left: 5px;
position: relative;
top: 0px;
font-size: 18px;
text-align: center;
}
}
}
1 change: 1 addition & 0 deletions src/scss/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@
@import "components/marquee";
@import "components/cards";
@import "components/avatar";
@import "components/checkbox";
96 changes: 66 additions & 30 deletions website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,39 +156,41 @@ <h3>Inputs</h3>
</pre>
</figure>
</section>
<section class="sections backgrounds">
<h3>Colors</h3>
<section class="sections">
<h3>Checkbox</h3>
<p class="component-description">
Section, you can see different colored background elements with their respective color
names. NeoBrutalismCSS offers a range of background colors.
Section showcases checkbox style provided by NeoBrutalismCSS.
</p>
<div class="bg-orange">
<p>#ff5733 orange</p>
</div>
<div class="bg-blue">
<p>#0077b6 blue</p>
</div>
<div class="bg-green">
<p>#40d39c green</p>
</div>
<div class="bg-sky-blue">
<p>#b9e2f8 sky-blue</p>
</div>
<div class="bg-pale-red">
<p>#ffc5c8 pale-red</p>
</div>
<div class="bg-pale-violet">
<p>#bc98cb pale-violet</p>
</div>
<div class="bg-soft-blue">
<p>#4799ae soft-blue</p>
</div>
<div class="bg-pale-cyan">
<p>#b9e7de pale-cyan</p>
</div>
<div class="bg-pale-yellow">
<p>#fdfd96 pale-yellow</p>
<div class="dialog">
<label class="nb-label">Bike
<input type="checkbox" id="vehicle1" class="nb-checkbox" name="vehicle1" value="Bike">
</label>
<label class="nb-label">Car
<input type="checkbox" id="vehicle2" class="nb-checkbox" name="vehicle2" value="Car">
</label>
<label class="nb-label">Boat
<input type="checkbox" id="vehicle3" class="nb-checkbox" name="vehicle3" value="Boat">
</label>
</div>
<figure class="highlight">
<pre>
<button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
<code class="language-html" data-lang="html">
<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"dialog"</span><span class="tag">&gt;</span>
<span class="tag">&lt;label</span> <span class="class">class=</span><span class="name">"nb-label"</span>&gt;Bike
<span class="tag">&lt;input</span> <span class="class">type=</span><span class="name">"checkbox"</span> id=<span class="name">"vehicle1"</span> <span class="class">class=</span><span class="name">"nb-checkbox"</span> <span class="class">name=</span><span class="name">"vehicle1"</span> <span class="class">value=</span><span class="name">"Bike"</span>&gt;
<span class="tag">&lt;/label&gt;</span>
<span class="tag">&lt;label</span> <span class="class">class=</span><span class="name">"nb-label"</span>&gt;Car
<span class="tag">&lt;input</span> <span class="class">type=</span><span class="name">"checkbox"</span> id=<span class="name">"vehicle2"</span> <span class="class">class=</span><span class="name">"nb-checkbox"</span> <span class="class">name=</span><span class="name">"vehicle2"</span> <span class="class">value=</span><span class="name">"Car"</span>&gt;
<span class="tag">&lt;/label&gt;</span>
<span class="tag">&lt;label</span> <span class="class">class=</span><span class="name">"nb-label"</span>&gt;Boat
<span class="tag">&lt;input</span> <span class="class">type=</span><span class="name">"checkbox"</span> id=<span class="name">"vehicle3"</span> <span class="class">class=</span><span class="name">"nb-checkbox"</span> <span class="class">name=</span><span class="name">"vehicle3"</span> <span class="class">value=</span><span class="name">"Boat"</span>&gt;
<span class="tag">&lt;/label&gt;</span>
<span class="tag">&lt;/div&gt;</span>
</code>
</pre>
</figure>

</section>
<section class="sections">
<h3>Card</h3>
Expand Down Expand Up @@ -319,6 +321,40 @@ <h3>Avatar</h3>
</pre>
</figure>
</section>
<section class="sections backgrounds">
<h3>Colors</h3>
<p class="component-description">
Section, you can see different colored background elements with their respective color
names. NeoBrutalismCSS offers a range of background colors.
</p>
<div class="bg-orange">
<p>#ff5733 orange</p>
</div>
<div class="bg-blue">
<p>#0077b6 blue</p>
</div>
<div class="bg-green">
<p>#40d39c green</p>
</div>
<div class="bg-sky-blue">
<p>#b9e2f8 sky-blue</p>
</div>
<div class="bg-pale-red">
<p>#ffc5c8 pale-red</p>
</div>
<div class="bg-pale-violet">
<p>#bc98cb pale-violet</p>
</div>
<div class="bg-soft-blue">
<p>#4799ae soft-blue</p>
</div>
<div class="bg-pale-cyan">
<p>#b9e7de pale-cyan</p>
</div>
<div class="bg-pale-yellow">
<p>#fdfd96 pale-yellow</p>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-content">
Expand Down
9 changes: 6 additions & 3 deletions website/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,9 +172,12 @@ code {
}

/* Button and Link Styles */
button,
a,
input {
.nb-button,
.nb-input {
font-family: "Public Sans", sans-serif;
margin: 20px;
}
a {
font-family: "Public Sans", sans-serif;
margin: 20px;
}
Expand Down

0 comments on commit 0bebc63

Please sign in to comment.