diff options
7 files changed, 27 insertions, 31 deletions
diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html index d20045b4e2..f08f69701b 100644 --- a/site/content/docs/5.1/examples/dropdowns/index.html +++ b/site/content/docs/5.1/examples/dropdowns/index.html @@ -81,14 +81,14 @@ body_class: "" </svg> <div class="d-flex gap-5 justify-content-center"> - <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-4 mx-0 shadow w-220px"> + <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px"> <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li> <li><a class="dropdown-item rounded-2" href="#">Another action</a></li> <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li> </ul> - <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-4 mx-0 border-0 shadow w-220px"> + <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px"> <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li> <li><a class="dropdown-item rounded-2" href="#">Another action</a></li> <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li> diff --git a/site/content/docs/5.1/examples/features/features.css b/site/content/docs/5.1/examples/features/features.css index 1f7cd41ce4..f8322faf03 100644 --- a/site/content/docs/5.1/examples/features/features.css +++ b/site/content/docs/5.1/examples/features/features.css @@ -1,6 +1,7 @@ .feature-icon { width: 4rem; height: 4rem; + border-radius: .75rem; } .icon-link > .bi { @@ -16,6 +17,7 @@ .icon-square { width: 3rem; height: 3rem; + border-radius: .75rem; } .text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } diff --git a/site/content/docs/5.1/examples/features/index.html b/site/content/docs/5.1/examples/features/index.html index dc50ca8b22..ebbde2d30d 100644 --- a/site/content/docs/5.1/examples/features/index.html +++ b/site/content/docs/5.1/examples/features/index.html @@ -71,7 +71,7 @@ body_class: "" <h2 class="pb-2 border-bottom">Columns with icons</h2> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="feature col"> - <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3"> + <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient text-white fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> </div> <h2>Featured title</h2> @@ -82,7 +82,7 @@ body_class: "" </a> </div> <div class="feature col"> - <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3"> + <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient text-white fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> </div> <h2>Featured title</h2> @@ -93,7 +93,7 @@ body_class: "" </a> </div> <div class="feature col"> - <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3"> + <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient text-white fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> <h2>Featured title</h2> @@ -112,7 +112,7 @@ body_class: "" <h2 class="pb-2 border-bottom">Hanging icons</h2> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="col d-flex align-items-start"> - <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3"> + <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> <div> @@ -124,7 +124,7 @@ body_class: "" </div> </div> <div class="col d-flex align-items-start"> - <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3"> + <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> </div> <div> @@ -136,7 +136,7 @@ body_class: "" </div> </div> <div class="col d-flex align-items-start"> - <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3"> + <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> </div> <div> @@ -157,7 +157,7 @@ body_class: "" <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5"> <div class="col"> - <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2> <ul class="d-flex list-unstyled mt-auto"> @@ -178,7 +178,7 @@ body_class: "" </div> <div class="col"> - <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2> <ul class="d-flex list-unstyled mt-auto"> @@ -199,7 +199,7 @@ body_class: "" </div> <div class="col"> - <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2> <ul class="d-flex list-unstyled mt-auto"> diff --git a/site/content/docs/5.1/examples/list-groups/index.html b/site/content/docs/5.1/examples/list-groups/index.html index 36a9441886..9599913c02 100644 --- a/site/content/docs/5.1/examples/list-groups/index.html +++ b/site/content/docs/5.1/examples/list-groups/index.html @@ -161,25 +161,25 @@ body_class: "" <div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto"> <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked> - <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios1"> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1"> First radio <span class="d-block small opacity-50">With support text underneath to add more detail</span> </label> <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value=""> - <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios2"> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2"> Second radio <span class="d-block small opacity-50">Some other text goes here</span> </label> <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value=""> - <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios3"> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3"> Third radio <span class="d-block small opacity-50">And we end with another snippet of text</span> </label> <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled> - <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios4"> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4"> Fourth disabled radio <span class="d-block small opacity-50">This option is disabled</span> </label> diff --git a/site/content/docs/5.1/examples/modals/index.html b/site/content/docs/5.1/examples/modals/index.html index cc0feff873..8043f2b44a 100644 --- a/site/content/docs/5.1/examples/modals/index.html +++ b/site/content/docs/5.1/examples/modals/index.html @@ -57,7 +57,7 @@ body_class: "" <div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet"> <div class="modal-dialog" role="document"> - <div class="modal-content rounded-6 shadow"> + <div class="modal-content rounded-4 shadow"> <div class="modal-header border-bottom-0"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> @@ -77,7 +77,7 @@ body_class: "" <div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice"> <div class="modal-dialog" role="document"> - <div class="modal-content rounded-4 shadow"> + <div class="modal-content rounded-3 shadow"> <div class="modal-body p-4 text-center"> <h5 class="mb-0">Enable this setting?</h5> <p class="mb-0">You can always change your mind in your account settings.</p> @@ -94,7 +94,7 @@ body_class: "" <div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour"> <div class="modal-dialog" role="document"> - <div class="modal-content rounded-6 shadow"> + <div class="modal-content rounded-4 shadow"> <div class="modal-body p-5"> <h2 class="fw-bold mb-0">What's new</h2> @@ -131,7 +131,7 @@ body_class: "" <div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin"> <div class="modal-dialog" role="document"> - <div class="modal-content rounded-5 shadow"> + <div class="modal-content rounded-4 shadow"> <div class="modal-header p-5 pb-4 border-bottom-0"> <!-- <h5 class="modal-title">Modal title</h5> --> <h2 class="fw-bold mb-0">Sign up for free</h2> @@ -141,26 +141,26 @@ body_class: "" <div class="modal-body p-5 pt-0"> <form class=""> <div class="form-floating mb-3"> - <input type="email" class="form-control rounded-4" id="floatingInput" placeholder="name@example.com"> + <input type="email" class="form-control rounded-3" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> <div class="form-floating mb-3"> - <input type="password" class="form-control rounded-4" id="floatingPassword" placeholder="Password"> + <input type="password" class="form-control rounded-3" id="floatingPassword" placeholder="Password"> <label for="floatingPassword">Password</label> </div> - <button class="w-100 mb-2 btn btn-lg rounded-4 btn-primary" type="submit">Sign up</button> + <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button> <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> <hr class="my-4"> <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2> - <button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-4" type="submit"> + <button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-3" type="submit"> <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg> Sign up with Twitter </button> - <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-4" type="submit"> + <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit"> <svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg> Sign up with Facebook </button> - <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-4" type="submit"> + <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg> Sign up with GitHub </button> diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.css b/site/content/docs/5.1/examples/sidebars/sidebars.css index a5cea9b4d3..5dc9fbaebd 100644 --- a/site/content/docs/5.1/examples/sidebars/sidebars.css +++ b/site/content/docs/5.1/examples/sidebars/sidebars.css @@ -57,5 +57,3 @@ main { .scrollarea { overflow-y: auto; } - -.fw-semibold { font-weight: 600; } diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html index 9a3334fb25..f70f859a6f 100644 --- a/site/layouts/_default/examples.html +++ b/site/layouts/_default/examples.html @@ -51,10 +51,6 @@ fill: currentColor; } - .rounded-4 { border-radius: .5rem; } - .rounded-5 { border-radius: .75rem; } - .rounded-6 { border-radius: 1rem; } - .nav-scroller { position: relative; z-index: 2; |