2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00

Docs: replace CSS by utilities in examples (#35699)

* Drop .opacity-50 and .opacity-75 redefinition in examples

* Drop unused .card-img-right from blog example CSS files

* Use line-height utilities when possible

* Use rounded-* utilities in examples

* Replace .nav-underline by .nav-scroller and use it in examples.html default

* Use .mb-1 for .blog-post-title

* Remove unused CSS rule and use .fw-* utilities for carousels examples

* Use utilities for cheatsheet examples

* Extract some CSS to utilities for .nav-masthead .nav-link in cover example

* Dashboard group of minor modifications

* Dropdowns example: refactoring

* Dropdowns example refactoring: fix linting by removing selector by id

* Features example refactoring

* Headers example refactoring

* List groups example refactoring

* Sidebars example refactoring

* Sign-in example refactoring

* Starter template refactoring

* Fix RTL examples

Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Julien Déramond
2022-02-23 19:31:18 +01:00
committed by GitHub
parent 36765912c6
commit 333d89e498
36 changed files with 262 additions and 436 deletions
@@ -5,7 +5,6 @@ body {
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
@@ -62,7 +61,6 @@ body {
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
@@ -72,7 +70,6 @@ body {
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
@@ -84,8 +81,6 @@ body {
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
@@ -5,7 +5,6 @@ body {
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
@@ -58,7 +57,6 @@ body {
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
@@ -68,7 +66,6 @@ body {
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
}
@@ -80,8 +77,6 @@ body {
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
@@ -12,11 +12,11 @@ extra_js:
---
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
@@ -31,70 +31,70 @@ extra_js:
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home"></span>
<span data-feather="home" class="align-text-bottom"></span>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
<span data-feather="file" class="align-text-bottom"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
<span data-feather="shopping-cart" class="align-text-bottom"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
<span data-feather="users" class="align-text-bottom"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
<span data-feather="bar-chart-2" class="align-text-bottom"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
<span data-feather="layers" class="align-text-bottom"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle"></span>
<span data-feather="plus-circle" class="align-text-bottom"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
<span data-feather="file-text" class="align-text-bottom"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
<span data-feather="file-text" class="align-text-bottom"></span>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
<span data-feather="file-text" class="align-text-bottom"></span>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
<span data-feather="file-text" class="align-text-bottom"></span>
Year-end sale
</a>
</li>
@@ -111,7 +111,7 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
<span data-feather="calendar" class="align-text-bottom"></span>
This week
</button>
</div>