From 99777662c678341b0220630c05a9526faab36c95 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 1 Sep 2020 15:16:50 -0700 Subject: [PATCH] Rename .close to .btn-close, replace times sign with background SVG, update focus state --- scss/_alert.scss | 7 +- scss/_close.scss | 42 +++++----- scss/_modal.scss | 2 +- scss/_variables.scss | 12 +-- site/content/docs/5.0/components/alerts.md | 4 +- .../docs/5.0/components/close-button.md | 11 +-- site/content/docs/5.0/components/modal.md | 76 +++++-------------- 7 files changed, 55 insertions(+), 99 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index 19157b2981..078aaaa68b 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -27,15 +27,14 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: $close-font-size + $alert-padding-x * 2; + padding-right: $alert-padding-x * 3.5; // Adjust close link position - .close { + .btn-close { position: absolute; top: 0; right: 0; - padding: $alert-padding-y $alert-padding-x; - color: inherit; + padding: $alert-padding-y * 1.25 $alert-padding-x; } } diff --git a/scss/_close.scss b/scss/_close.scss index dd6541e0d3..6bc621f067 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,36 +1,36 @@ -.close { - @include font-size($close-font-size); - font-weight: $close-font-weight; - line-height: 1; - color: $close-color; - text-shadow: $close-text-shadow; +// transparent background and border properties included for button version. +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +.btn-close { + box-sizing: content-box; + width: $btn-close-width; + height: $btn-close-height; + padding: $btn-close-padding-y $btn-close-padding-x; + color: $btn-close-color; + background: transparent escape-svg($btn-close-bg) no-repeat center center / $btn-close-width auto; // include transparent for button elements + background-clip: content-box; + border: 0; // for button elements + @include border-radius(); opacity: .5; // Override 's hover style &:hover { - color: $close-color; + color: $btn-close-color; text-decoration: none; + opacity: .75; } - &:hover, &:focus { - opacity: .75; + outline: none; + box-shadow: $btn-close-focus-shadow; + opacity: 1; } &:disabled, &.disabled { pointer-events: none; + user-select: none; } } - -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - -// stylelint-disable-next-line selector-no-qualifying-type -button.close { - padding: 0; - background-color: transparent; - border: 0; -} diff --git a/scss/_modal.scss b/scss/_modal.scss index 5443ef124d..9cf3aa89a9 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -118,7 +118,7 @@ border-bottom: $modal-header-border-width solid $modal-header-border-color; @include border-top-radius($modal-content-inner-border-radius); - .close { + .btn-close { padding: $modal-header-padding; // auto on the left force icon to the right even when there is no .modal-title margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; diff --git a/scss/_variables.scss b/scss/_variables.scss index be8c014b3b..266a497a77 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1269,11 +1269,13 @@ $spinner-border-width-sm: .2em !default; // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; - +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: .25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $black !default; +$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-focus-shadow: $input-btn-focus-box-shadow !default; // Code diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index dace2f7181..c58e93a231 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -66,9 +66,7 @@ You can see this in action with a live demo: {{< example >}} {{< /example >}} diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md index 28211cd5d6..1a83d7a96f 100644 --- a/site/content/docs/5.0/components/close-button.md +++ b/site/content/docs/5.0/components/close-button.md @@ -5,14 +5,9 @@ description: A generic close button for dismissing content like modals and alert group: components --- -**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` applied to, preventing hover and active states from triggering. +**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` and `user-select: none` applied to preventing hover and active states from triggering. {{< example >}} - - - + + {{< /example >}} diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 19d0aae376..fbf36f0dd6 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -66,9 +66,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
Modal title
- +

Modal body text goes here.

@@ -91,9 +89,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
- +

Woohoo, you're reading this text in a modal!

@@ -124,9 +120,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
- +
... @@ -149,9 +143,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
- +

I will not close if you click outside me. Don't even try to press escape key.

@@ -182,9 +174,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
- +
... @@ -208,9 +198,7 @@ When modals become too long for the user's viewport or device, they scroll indep
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -253,9 +241,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -307,9 +293,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -327,9 +311,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -376,9 +358,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
- +
Popover in a modal
@@ -511,9 +491,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
- +
@@ -638,9 +616,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
- +
... @@ -654,9 +630,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
- +
... @@ -670,9 +644,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
- +
... @@ -736,9 +708,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -772,9 +742,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
... @@ -791,9 +759,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
... @@ -810,9 +776,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
... @@ -829,9 +793,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
...