feat(alert+modal): harmonize close icon thourgh alerts, modals and or…

…ange popins by using a Solaris icon and cnosistent styles
Orange-OpenSource · Oct 8, 2019 · 733d6e8 · 733d6e8
1 parent f32c810
commit 733d6e8
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 81 deletions.
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -11,7 +11,7 @@
   // Boosted mod
   .alert-icon {
     position: absolute;
-    top: .625rem;
+    top: map-get($spacers, 2);
     &::after {
       width: alert-logo-size("md");
       height: alert-logo-size("md");
@@ -37,7 +37,7 @@
 .alert-lg {
   padding: $alert-padding-y-lg $alert-padding-x-lg;
   .alert-icon {
-    top: .625rem;
+    top: map-get($spacers, 2);
     &::after {
       width: alert-logo-size("lg");
       height: alert-logo-size("lg");
@@ -68,12 +68,18 @@
   // Adjust close link position
   .close {
     position: absolute;
-    top: 0;
+    top: map-get($spacers, 2); // Boosted mod
     right: 0;
     padding: $alert-padding-y $alert-padding-x;
     line-height: $alert-padding-y; // Boosted mod
     color: inherit;
   }
+
+  // Boosted mod
+  &.alert-sm .close {
+    top: 0;
+  }
+  // end mod
 }
 
 

diff --git a/scss/_close.scss b/scss/_close.scss
@@ -1,23 +1,35 @@
 .close {
   float: right;
+  // Boosted mod
+  width: $spacer;
+  height: $spacer;
+  padding: $spacer;
+  // end mod
   @include font-size($close-font-size);
   font-weight: $close-font-weight;
   line-height: 1;
   color: $close-color;
   text-shadow: $close-text-shadow;
-  opacity: 1; // Boosted mod
+  // Boosted mod
+  background: escape-svg($close-icon) no-repeat center / $spacer;
+  opacity: 1;
+  .bg-dark & {
+    background-image: escape-svg($close-icon-dark);
+  }
 
   // Override <a>'s hover style
-  @include hover() {
-    color: $close-color;
-    text-decoration: none;
-  }
+  // @include hover() {
+  //   color: $black;
+  //   text-decoration: none;
+  // }
 
-  &:not(:disabled):not(.disabled) {
-    @include hover-focus() {
-      opacity: 1; // Boosted mod
+  @include hover-focus() {
+    outline: $border-width solid;
+    &:not(:disabled):not(.disabled) {
+      opacity: 1;
     }
   }
+  // end mod
 }
 
 // Additional properties for button version
@@ -27,8 +39,8 @@
 
 // stylelint-disable-next-line selector-no-qualifying-type
 button.close {
-  padding: 0;
-  background-color: transparent;
+  //padding: 0; // Boosted mod
+  //background-color: transparent; // Boosted mod
   border: 0;
   appearance: none;
 }

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -142,12 +142,8 @@
 
   // Boosted mod
   .close {
-    width: $spacer;
-    height: $spacer;
-    padding: $spacer;
     // 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;
-    background: escape-svg($modal-close-icon) no-repeat center / $spacer;
   }
   // end mod
 }

diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss
@@ -12,8 +12,6 @@ a {
   }
 }
 
-.close:hover,
-.close:focus,
 div.active:focus {
   outline: $border-width solid;
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1062,16 +1062,14 @@ $modal-sm:                          300px !default;
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              null !default;
 $modal-transition:                  transform .3s ease-out !default;
-$modal-close-icon:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 852.063 852.063'><path d='M.987 57.125L57.125.987 851.048 794.91l-56.138 56.138zM794.91.987l56.138 56.138L57.125 851.048.987 794.91z' fill='#{$gray-700}'/></svg>") !default; // Boosted mod
-
 
 // Alerts
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-y:                   .8125rem !default;
+$alert-padding-y:                   1rem !default; // Boosted mod
 $alert-padding-x:                   1.25rem !default;
-$alert-padding-y-sm:                .3125rem !default;
+$alert-padding-y-sm:                .375rem !default; // Boosted mod
 $alert-padding-x-sm:                $alert-padding-x !default;
 $alert-padding-y-lg:                1rem !default;
 $alert-padding-x-lg:                $alert-padding-x !default;
@@ -1202,7 +1200,9 @@ $spinner-border-width-sm: .2em !default;
 $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;
+$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 1000 1000'><path d='M817.493,676.165a49.977,49.977,0,0,1,0,70.664l-70.664,70.664a49.977,49.977,0,0,1-70.664,0L499.5,640.828,322.835,817.493a49.977,49.977,0,0,1-70.664,0l-70.664-70.664a49.977,49.977,0,0,1,0-70.664L358.172,499.5,181.507,322.835a49.977,49.977,0,0,1,0-70.664l70.664-70.664a49.977,49.977,0,0,1,70.664,0L499.5,358.172,676.165,181.507a49.977,49.977,0,0,1,70.664,0l70.664,70.664a49.977,49.977,0,0,1,0,70.664L640.828,499.5Z'/></svg>") !default; // Boosted mod
+$close-icon-dark:                   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M817.493,676.165a49.977,49.977,0,0,1,0,70.664l-70.664,70.664a49.977,49.977,0,0,1-70.664,0L499.5,640.828,322.835,817.493a49.977,49.977,0,0,1-70.664,0l-70.664-70.664a49.977,49.977,0,0,1,0-70.664L358.172,499.5,181.507,322.835a49.977,49.977,0,0,1,0-70.664l70.664-70.664a49.977,49.977,0,0,1,70.664,0L499.5,358.172,676.165,181.507a49.977,49.977,0,0,1,70.664,0l70.664,70.664a49.977,49.977,0,0,1,0,70.664L640.828,499.5Z' fill='#{$white}'/></svg>") !default; // Boosted mod
 
 
 // Code

diff --git a/site/docs/4.3/components/alerts.md b/site/docs/4.3/components/alerts.md
@@ -57,118 +57,92 @@ alert-icon svg-warning
         <div class="pl-4 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close p-1 px-3 pb-2" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">×</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-sm border border-info alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-info" aria-label="Info"></span>
         <div class="pl-4 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close p-1 px-3 pb-2" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">×</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-sm border border-warning alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-warning" aria-label="Warning"></span>
         <div class="pl-4 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close p-1 px-3 pb-2" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">×</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-sm border border-danger alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-error" aria-label="Danger"></span>
         <div class="pl-4 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close p-1 px-3 pb-2" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">×</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert border border-success alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-success" aria-label="Success"></span>
         <div class="pl-3 ml-3 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close pb-3" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert border border-info alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-info" aria-label="Info"></span>
         <div class="pl-3 ml-3 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close pb-3" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert border border-warning alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-warning" aria-label="Warning"></span>
         <div class="pl-3 ml-3 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close pb-3" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert border border-danger alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-error" aria-label="Danger"></span>
         <div class="pl-3 ml-3 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close pb-3" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-lg border border-success alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-success" aria-label="Success"></span>
         <div class="pl-5 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-lg border border-info alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-info" aria-label="Info"></span>
         <div class="pl-5 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-lg border border-warning alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-warning" aria-label="Warning"></span>
         <div class="pl-5 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-lg border border-danger alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-error" aria-label="Danger"></span>
         <div class="pl-5 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert alert-lg border border-danger alert-dismissible fade show bg-transparent text-dark" role="alert">
         <span class="alert-icon svg-error mt-2" aria-label="Danger"></span>
         <div class="pl-5">
             <div class="font-weight-bold">Your changes have been saved.</div>
             <p class="mb-0">You may now log-in with the username you have chosen.</p>
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
     </div>
     <div class="alert border-0 alert-sm bg-transparent px-0" role="alert">
         <span class="alert-icon svg-success" aria-label="Success"></span>
@@ -184,37 +158,29 @@ alert-icon svg-warning
             <div class="pl-4 font-weight-bold">
                 Your changes have been saved.
             </div>
-            <button type="button" class="close p-1 px-3 pb-2" data-dismiss="alert" aria-label="Close">
-            <span class="text-white" aria-hidden="true">×</span>
-            </button>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
         </div>
         <div class="alert border border-info alert-dismissible fade show bg-transparent text-white" role="alert">
             <span class="alert-icon svg-info" aria-label="Info"></span>
             <div class="pl-3 ml-3 font-weight-bold">
                 Your changes have been saved.
             </div>
-            <button type="button" class="close pb-3" data-dismiss="alert" aria-label="Close">
-            <span class="text-white" aria-hidden="true">&times;</span>
-            </button>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
         </div>
         <div class="alert alert-lg border border-warning alert-dismissible fade show bg-transparent text-white" role="alert">
             <span class="alert-icon svg-warning" aria-label="Warning"></span>
             <div class="pl-5 font-weight-bold">
                 Your changes have been saved.
             </div>
-            <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-            <span class="text-white" aria-hidden="true">&times;</span>
-            </button>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
         </div>
         <div class="alert alert-lg border border-danger alert-dismissible fade show bg-transparent text-white" role="alert">
             <span class="alert-icon svg-error mt-2" aria-label="Danger"></span>
             <div class="pl-5 font-weight-bold">
                 <div class="font-weight-bold">Your changes have been saved.</div>
                 <p class="mb-0"><small>You may now log-in with the username you have chosen.</small></p>
             </div>
-            <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-            <span class="text-white" aria-hidden="true">&times;</span>
-            </button>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
         </div>
         <div class="alert border-0 alert-sm bg-transparent px-0 text-white" role="alert">
             <span class="alert-icon svg-success" aria-label="Success"></span>
@@ -256,9 +222,7 @@ You can see this in action with a live demo:
 {% capture 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>
 {% endcapture %}
 {% include example.html content=example %}
@@ -276,9 +240,7 @@ $('.alert').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>
 {% endhighlight %}
 
 Note that closing an alert will remove it from the DOM.