Skip to content

Commit

Permalink
fix: add "cursor: pointer" for form check (#1)
Browse files Browse the repository at this point in the history 
Signed-off-by: Jakob Steiner <[email protected]>
  • Loading branch information
@kosmoz
kosmoz committed Feb 28, 2024
1 parent a060c33 commit 2778c9d
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 101 deletions.
217 changes: 118 additions & 99 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
Examples taken from Bootstrap Examples page:
https://getbootstrap.com/docs/5.3/examples/
-->

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
Expand Down Expand Up @@ -100,19 +101,6 @@
<path
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
<path
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
</symbol>
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd"
Expand Down Expand Up @@ -192,95 +180,123 @@
</symbol>
</svg>

<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
<button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
<button class="btn btn-success rounded-pill px-3" type="button">Success</button>
<button class="btn btn-danger rounded-pill px-3" type="button">Danger</button>
<button class="btn btn-warning rounded-pill px-3" type="button">Warning</button>
<button class="btn btn-info rounded-pill px-3" type="button">Info</button>
<button class="btn btn-light rounded-pill px-3" type="button">Light</button>
<button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
<button class="btn btn-link rounded-pill px-3" type="button">Link</button>
</div>
<main>
<div class="container">

<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
<button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
<button class="btn btn-success rounded-pill px-3" type="button">Success</button>
<button class="btn btn-danger rounded-pill px-3" type="button">Danger</button>
<button class="btn btn-warning rounded-pill px-3" type="button">Warning</button>
<button class="btn btn-info rounded-pill px-3" type="button">Info</button>
<button class="btn btn-light rounded-pill px-3" type="button">Light</button>
<button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
<button class="btn btn-link rounded-pill px-3" type="button">Link</button>
</div>

<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
<div class="d-grid gap-2">
<button class="btn btn-outline-secondary" type="button">Secondary action</button>
<button class="btn btn-primary" type="button">Primary action</button>
</div>
</div>
<div class="b-example-divider"></div>

<div class="b-example-divider"></div>
<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
<div class="d-grid gap-2">
<button class="btn btn-outline-secondary" type="button">Secondary action</button>
<button class="btn btn-primary" type="button">Primary action</button>
</div>
</div>

<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
Primary icon
<svg class="bi ms-1" width="20" height="20">
<use xlink:href="#arrow-right-short" />
</svg>
</button>
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
Secondary icon
<svg class="bi ms-1" width="20" height="20">
<use xlink:href="#arrow-right-short" />
</svg>
</button>
</div>
<div class="b-example-divider"></div>

<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
Primary icon
<svg class="bi ms-1" width="20" height="20">
<use xlink:href="#arrow-right-short" />
</svg>
</button>
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
Secondary icon
<svg class="bi ms-1" width="20" height="20">
<use xlink:href="#arrow-right-short" />
</svg>
</button>
</div>

<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
</div>
<div class="b-example-divider"></div>

<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
</div>

<div class="b-example-divider"></div>
<div class="b-example-divider"></div>

<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>
<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>

<div class="d-flex gap-2 justify-content-center pb-5">
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>
<div class="d-flex gap-2 justify-content-center pb-5">
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24">
<use xlink:href="#x-lg" />
</svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>

<div class="b-example-divider"></div>
<hr>

<main>
<h1 class="visually-hidden">Headers examples</h1>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>

<hr>

<h1 class="visually-hidden">Headers examples</h1>

<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32">
Expand Down Expand Up @@ -467,16 +483,18 @@ <h1 class="visually-hidden">Headers examples</h1>
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="bg-body-tertiary border rounded-3 p-1">
<h1>Heading 1</h4>
<h2>Heading 2</h4>
<h3>Heading 3</h4>
<h4>Heading 4</h4>
<h5>Heading 5</h4>
<h6>Heading 6</h4>
<h2>Heading 2</h4>
<h3>Heading 3</h4>
<h4>Heading 4</h4>
<h5>Heading 5</h4>
<h6>Heading 6</h4>
</div>
<div class="bg-body-tertiary border rounded-3 p-1 prose-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius est id cursus volutpat. Curabitur auctor
sagittis bibendum. Quisque ac <code>ullamcorper</code> lorem, sed commodo mauris. Curabitur hendrerit feugiat laoreet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius est id cursus volutpat. Curabitur
auctor
sagittis bibendum. Quisque ac <code>ullamcorper</code> lorem, sed commodo mauris. Curabitur hendrerit
feugiat laoreet.
Vivamus a vestibulum ex.
</p>
<pre>public class App {
Expand All @@ -486,7 +504,8 @@ <h6>Heading 6</h4>
</pre>

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius est id cursus volutpat. Curabitur auctor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius est id cursus volutpat. Curabitur
auctor
sagittis bibendum. Quisque ac ullamcorper lorem, sed commodo mauris. Curabitur hendrerit feugiat laoreet.
Vivamus a vestibulum ex.
</blockquote>
Expand Down Expand Up @@ -617,4 +636,4 @@ <h6>Heading 6</h4>
</main>
</body>

</html>
</html>
5 changes: 3 additions & 2 deletions index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,10 @@ $theme-colors: map-merge($theme-colors, $custom-colors);

// 8. Add additional custom code here
@import "scss/components/anminations";
@import "scss/components/list";
@import "scss/components/card-elevated";
@import "scss/components/cta";
@import "scss/components/forms";
@import "scss/components/list";
@import "scss/components/resources";
@import "scss/components/scroll-container";
@import "scss/components/utilities";
Expand All @@ -75,4 +76,4 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
@import "@fontsource/inter/latin-400.css";
@import "@fontsource/inter/latin-600.css";
@import "@fontsource/inter/latin-700.css";
@import "@fontsource/poppins/latin-600.css";
@import "@fontsource/poppins/latin-600.css";
4 changes: 4 additions & 0 deletions scss/components/_forms.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.form-check-input,
.form-check-label {
cursor: pointer;
}

0 comments on commit 2778c9d

Please sign in to comment.