1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

Move hand cursor for buttons to reboot

This commit is contained in:
Martijn Cuppens 2018-12-29 12:55:20 +01:00 committed by XhmikosR
parent 83dc45b31b
commit e1b990fb90
9 changed files with 29 additions and 32 deletions

View file

@ -34,11 +34,6 @@
@include box-shadow(none); @include box-shadow(none);
} }
// Opinionated: add "hand" cursor to non-disabled .btn elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active { &:not(:disabled):not(.disabled).active {
@include box-shadow($btn-active-box-shadow); @include box-shadow($btn-active-box-shadow);

View file

@ -17,9 +17,6 @@
@include hover-focus { @include hover-focus {
opacity: .75; opacity: .75;
} }
// Opinionated: add "hand" cursor to non-disabled .close elements
cursor: pointer;
} }
} }

View file

@ -116,11 +116,6 @@
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
} }
// Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
} }
// Keep as a separate element so folks can easily override it with another icon // Keep as a separate element so folks can easily override it with another icon

View file

@ -27,11 +27,6 @@
outline: $pagination-focus-outline; outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow; box-shadow: $pagination-focus-box-shadow;
} }
// Opinionated: add "hand" cursor to non-disabled .page-link elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
} }
.page-item { .page-item {

View file

@ -349,6 +349,18 @@ button,
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
} }
// Opinionated: add "hand" cursor to non-disabled button elements.
@if $enable-pointer-cursor-for-buttons {
button,
[type="button"],
[type="reset"],
[type="submit"] {
&:not(:disabled) {
cursor: pointer;
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,

View file

@ -114,6 +114,7 @@ $enable-transitions: true !default;
$enable-prefers-reduced-motion-media-query: true !default; $enable-prefers-reduced-motion-media-query: true !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default; $enable-grid-classes: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-print-styles: true !default; $enable-print-styles: true !default;
$enable-validation-icons: true !default; $enable-validation-icons: true !default;

View file

@ -25,7 +25,6 @@
padding: .25rem .5rem; padding: .25rem .5rem;
font-size: 75%; font-size: 75%;
color: #818a91; color: #818a91;
cursor: pointer;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@include border-radius; @include border-radius;

View file

@ -280,12 +280,14 @@ These changes, and more, are demonstrated below.
<p> <p>
<button type="submit">Button submit</button> <button type="submit">Button submit</button>
<input type="submit" value="Input submit button"> <input type="submit" value="Input submit button">
<input type="reset" value="Input reset button">
<input type="button" value="Input button"> <input type="button" value="Input button">
</p> </p>
<p> <p>
<button type="submit" disabled>Button submit</button> <button type="submit" disabled>Button submit</button>
<input type="submit" value="Input submit button" disabled> <input type="submit" value="Input submit button" disabled>
<input type="reset" value="Input reset button" disabled>
<input type="button" value="Input button" disabled> <input type="button" value="Input button" disabled>
</p> </p>
</fieldset> </fieldset>

View file

@ -229,19 +229,20 @@ Customize Bootstrap 4 with our built-in custom variables file and easily toggle
You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file. You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file.
| Variable | Values | Description | | Variable | Values | Description |
| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | -------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | | `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). |
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | | `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | | `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | | `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
| `$enable-hover-media-query` | `true` or `false` (default) | **Deprecated** | | `$enable-hover-media-query` | `true` or `false` (default) | **Deprecated** |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | | `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | | `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
## Color ## Color