feat(close): Orange branded 🎉

Orange-OpenSource · May 14, 2020 · 2dab62d · 2dab62d
1 parent 18cc200
commit 2dab62d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 123 deletions.
diff --git a/scss/_close.scss b/scss/_close.scss
@@ -1,10 +1,14 @@
 .close {
- @include font-size($close-font-size);
- font-weight: $close-font-weight;
- line-height: 1;
- color: $close-color;
- text-shadow: $close-text-shadow;
- opacity: .5;
+ // Boosted mod
+ width: $close-icon-size;
+ height: $close-icon-size;
+ padding: 0;
+ margin-right: map-get($spacers, 2);
+ background: escape-svg($close-icon) no-repeat 50% / #{$close-icon-size};
+ border: 0;
+ outline-offset: map-get($spacers, 2);
+ appearance: none;
+ // End mod
 
  // Override <a>'s hover style
  &:hover {
@@ -14,24 +18,12 @@
 
  &:hover,
  &:focus {
- opacity: .75;
+ outline: $border-width solid $gray-500;
+ outline-offset: -#{$border-width};
  }
 
  &:disabled,
  &.disabled {
  pointer-events: 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;
- appearance: none;
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1282,11 +1282,10 @@ $spinner-border-width-sm: .2em !default;
 // Close
 
 $close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: null !default;
 $close-color: $black !default;
-$close-text-shadow: null !default;
 // Boosted mod
-//$close-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M15 17.121l-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
+$close-icon-size: map-get($spacers, 4) !default;
+$close-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M15 17.121l-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
 //$close-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='#{$white}' d='M15 17.121l-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
 //$close-icon-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='#{$primary}' d='M15 17.121l-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
 //$close-icon-stroke: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$black}' stroke-width='5' stroke-linecap='round' d='M15 17.121l-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;

diff --git a/site/content/docs/4.3/components/alerts.md b/site/content/docs/4.3/components/alerts.md
@@ -67,9 +67,7 @@ You can see this in action with a live demo:
 {{< example >}}
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
 </div>
 {{< /example >}}
 
@@ -89,9 +87,7 @@ alertList.forEach(function (alert) {
 Or with `data` attributes on a button **within the alert**, as demonstrated above:
 
 {{< highlight html >}}
-<button type="button" class="close" data-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">&times;</span>
-</button>
+<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
 {{< /highlight >}}
 
 Note that closing an alert will remove it from the DOM.

diff --git a/site/content/docs/4.3/components/close-button.md b/site/content/docs/4.3/components/close-button.md
@@ -8,11 +8,7 @@ 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.
 
 {{< example >}}
-<button type="button" class="close" aria-label="Close">
- <span aria-hidden="true">&times;</span>
-</button>
+<button type="button" class="close" aria-label="Close"></button>
 
-<button type="button" class="close" disabled aria-label="Close">
- <span aria-hidden="true">&times;</span>
-</button>
+<button type="button" class="close" disabled aria-label="Close"></button>
 {{< /example >}}
diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
@@ -44,9 +44,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
   <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>Modal body text goes here.</p>
@@ -66,9 +64,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>Modal body text goes here.</p>
@@ -91,9 +87,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>Woohoo, you're reading this text in a modal!</p>
@@ -124,9 +118,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -149,9 +141,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>I will not close if you click outside me. Don't even try to press escape key.</p>
@@ -182,9 +172,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -208,9 +196,7 @@ When modals become too long for the user's viewport or device, they scroll indep
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>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.</p>
@@ -253,9 +239,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>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.</p>
@@ -307,9 +291,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>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.</p>
@@ -327,9 +309,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>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.</p>
@@ -376,9 +356,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <h5>Popover in a modal</h5>
@@ -420,7 +398,7 @@ Utilize the Boosted grid system within a modal by nesting `.container-fluid` wit
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <div class="container-fluid bd-example-row">
@@ -511,9 +489,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLabel">New message</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <form>
@@ -635,9 +611,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -651,9 +625,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -667,9 +639,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -733,9 +703,7 @@ Another override is the option to pop up a modal that covers the user viewport,
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   <p>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.</p>
@@ -769,9 +737,7 @@ Another override is the option to pop up a modal that covers the user viewport,
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -788,9 +754,7 @@ Another override is the option to pop up a modal that covers the user viewport,
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -807,9 +771,7 @@ Another override is the option to pop up a modal that covers the user viewport,
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...
@@ -826,9 +788,7 @@ Another override is the option to pop up a modal that covers the user viewport,
  <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  </button>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body">
   ...