mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-30 22:52:24 +01:00
Add a debugger class.
This commit is contained in:
louismaximepiton
parent
fa3ad0bfd3
commit
833be9fe7d
@ -1,5 +1,13 @@
|
||||
{
|
||||
"files": [
|
||||
{
|
||||
"path": "./dist/css/bootstrap-debugger.css",
|
||||
"maxSize": "32.5 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap-debugger.min.css",
|
||||
"maxSize": "30.25 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap-grid.css",
|
||||
"maxSize": "6.5 kB"
|
||||
|
||||
@ -83,6 +83,14 @@ Within the download you'll find the following directories and files, logically g
|
||||
```text
|
||||
bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap-debugger.css
|
||||
│ ├── bootstrap-debugger.css.map
|
||||
│ ├── bootstrap-debugger.min.css
|
||||
│ ├── bootstrap-debugger.min.css.map
|
||||
│ ├── bootstrap-debugger.rtl.css
|
||||
│ ├── bootstrap-debugger.rtl.css.map
|
||||
│ ├── bootstrap-debugger.rtl.min.css
|
||||
│ ├── bootstrap-debugger.rtl.min.css.map
|
||||
│ ├── bootstrap-grid.css
|
||||
│ ├── bootstrap-grid.css.map
|
||||
│ ├── bootstrap-grid.min.css
|
||||
|
||||
44
scss/_debug.scss
Normal file
44
scss/_debug.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@if $enable-debugger-classes {
|
||||
.debug {
|
||||
&::before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
padding: $spacer * .5 $spacer;
|
||||
font-family: $font-family-base;
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
border-radius: 0 0 4px; // stylelint-disable-line property-disallowed-list
|
||||
@include font-size($h1-font-size);
|
||||
}
|
||||
|
||||
@each $breakpoint, $value in $grid-breakpoints {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
&::before {
|
||||
content: "#{$breakpoint}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class^="container"],
|
||||
&[class^="container"],
|
||||
.row,
|
||||
&.row {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1999;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background: repeating-linear-gradient(to right, transparent, transparent calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc(100% / 12)); // stylelint-disable-line function-disallowed-list
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -383,6 +383,7 @@ $enable-validation-icons: true !default;
|
||||
$enable-negative-margins: false !default;
|
||||
$enable-deprecation-messages: true !default;
|
||||
$enable-important-utilities: true !default;
|
||||
$enable-debugger-classes: false !default;
|
||||
|
||||
$enable-dark-mode: true !default;
|
||||
$color-mode-type: data !default; // `data` or `media-query`
|
||||
|
||||
3
scss/bootstrap-debugger.scss
vendored
Normal file
3
scss/bootstrap-debugger.scss
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
$enable-debugger-classes: true; // stylelint-disable-line scss/dollar-variable-default
|
||||
|
||||
@import "bootstrap";
|
||||
1
scss/bootstrap-grid.scss
vendored
1
scss/bootstrap-grid.scss
vendored
@ -58,5 +58,6 @@ $utilities: map-get-multiple(
|
||||
"padding-start",
|
||||
)
|
||||
);
|
||||
@import "debug";
|
||||
|
||||
@import "utilities/api";
|
||||
|
||||
1
scss/bootstrap.scss
vendored
1
scss/bootstrap.scss
vendored
@ -46,6 +46,7 @@
|
||||
|
||||
// Helpers
|
||||
@import "helpers";
|
||||
@import "debug";
|
||||
|
||||
// Utilities
|
||||
@import "utilities/api";
|
||||
|
||||
@ -25,6 +25,7 @@ You can find and customize these variables for key global options in Bootstrap's
|
||||
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
|
||||
| `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
|
||||
| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
|
||||
| `$enable-debugger-classes` | `true` or `false` (default) | Enables the use of `.debug` class. You can use it on any html element and it will highlight its children grids (`.row` and `.container-*`). It also displays the living breakpoint depending on the viewport. |
|
||||
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
|
||||
| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
|
||||
| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
|
||||
|
||||
@ -15,6 +15,14 @@ Once downloaded, unzip the compressed folder and you'll see something like this:
|
||||
```text
|
||||
bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap-debugger.css
|
||||
│ ├── bootstrap-debugger.css.map
|
||||
│ ├── bootstrap-debugger.min.css
|
||||
│ ├── bootstrap-debugger.min.css.map
|
||||
│ ├── bootstrap-debugger.rtl.css
|
||||
│ ├── bootstrap-debugger.rtl.css.map
|
||||
│ ├── bootstrap-debugger.rtl.min.css
|
||||
│ ├── bootstrap-debugger.rtl.min.css.map
|
||||
│ ├── bootstrap-grid.css
|
||||
│ ├── bootstrap-grid.css.map
|
||||
│ ├── bootstrap-grid.min.css
|
||||
@ -72,6 +80,7 @@ Bootstrap includes a handful of options for including some or all of our compile
|
||||
| CSS files | Layout | Content | Components | Utilities |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `bootstrap.css`<br> `bootstrap.min.css`<br> `bootstrap.rtl.css`<br> `bootstrap.rtl.min.css` | Included | Included | Included | Included |
|
||||
| `bootstrap-debugger.css`<br> `bootstrap-debugger.rtl.css`<br> `bootstrap-debugger.min.css`<br> `bootstrap-debugger.rtl.min.css` | Included (with debug classes) | Included | Included | Included |
|
||||
| `bootstrap-grid.css`<br> `bootstrap-grid.rtl.css`<br> `bootstrap-grid.min.css`<br> `bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
|
||||
| `bootstrap-utilities.css`<br> `bootstrap-utilities.rtl.css`<br> `bootstrap-utilities.min.css`<br> `bootstrap-utilities.rtl.min.css` | — | — | — | Included |
|
||||
| `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user