From e1b990fb9098d10979fe74e8521c2b39d64312b9 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 29 Dec 2018 12:55:20 +0100 Subject: [PATCH] Move hand cursor for buttons to reboot --- scss/_buttons.scss | 5 ---- scss/_close.scss | 3 --- scss/_navbar.scss | 5 ---- scss/_pagination.scss | 5 ---- scss/_reboot.scss | 12 +++++++++ scss/_variables.scss | 1 + site/docs/4.2/assets/scss/_clipboard-js.scss | 1 - site/docs/4.2/content/reboot.md | 2 ++ site/docs/4.2/getting-started/theming.md | 27 ++++++++++---------- 9 files changed, 29 insertions(+), 32 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 7c45534e00..16f9f67cca 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -34,11 +34,6 @@ @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 { @include box-shadow($btn-active-box-shadow); diff --git a/scss/_close.scss b/scss/_close.scss index 821922f4c4..ec6593a888 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -17,9 +17,6 @@ @include hover-focus { opacity: .75; } - - // Opinionated: add "hand" cursor to non-disabled .close elements - cursor: pointer; } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index b5bc5a9748..9344a245ad 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -116,11 +116,6 @@ @include hover-focus { 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 diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 9349f3f900..b4345311d3 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -27,11 +27,6 @@ outline: $pagination-focus-outline; box-shadow: $pagination-focus-box-shadow; } - - // Opinionated: add "hand" cursor to non-disabled .page-link elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } } .page-item { diff --git a/scss/_reboot.scss b/scss/_reboot.scss index ebbc179012..de7a14371b 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -349,6 +349,18 @@ button, -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. button::-moz-focus-inner, [type="button"]::-moz-focus-inner, diff --git a/scss/_variables.scss b/scss/_variables.scss index 2d5a5e67ff..30a69d7963 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -114,6 +114,7 @@ $enable-transitions: true !default; $enable-prefers-reduced-motion-media-query: true !default; $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS $enable-grid-classes: true !default; +$enable-pointer-cursor-for-buttons: true !default; $enable-print-styles: true !default; $enable-validation-icons: true !default; diff --git a/site/docs/4.2/assets/scss/_clipboard-js.scss b/site/docs/4.2/assets/scss/_clipboard-js.scss index 0cf3996446..e2dd56e259 100644 --- a/site/docs/4.2/assets/scss/_clipboard-js.scss +++ b/site/docs/4.2/assets/scss/_clipboard-js.scss @@ -25,7 +25,6 @@ padding: .25rem .5rem; font-size: 75%; color: #818a91; - cursor: pointer; background-color: transparent; border: 0; @include border-radius; diff --git a/site/docs/4.2/content/reboot.md b/site/docs/4.2/content/reboot.md index 7801e346e6..66a5d5a978 100644 --- a/site/docs/4.2/content/reboot.md +++ b/site/docs/4.2/content/reboot.md @@ -280,12 +280,14 @@ These changes, and more, are demonstrated below.

+

+

diff --git a/site/docs/4.2/getting-started/theming.md b/site/docs/4.2/getting-started/theming.md index 8c931c8642..85c09e86e4 100644 --- a/site/docs/4.2/getting-started/theming.md +++ b/site/docs/4.2/getting-started/theming.md @@ -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. -| 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/). | -| `$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-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-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-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-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. | +| 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/). | +| `$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-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-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-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-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | +| `$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