feat(close button): use Zeplin's defined cross for close button

Orange-OpenSource · Dec 11, 2019 · 332f4f3 · 332f4f3
1 parent 827dba7
commit 332f4f3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 26 deletions.
diff --git a/scss/_close.scss b/scss/_close.scss
@@ -1,35 +1,41 @@
 .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;
-  // Boosted mod
+  width: map-get($spacers, 4);
+  height: map-get($spacers, 4);
+  padding: 0;
+  margin-right: map-get($spacers, 2);
+  // @include font-size($close-font-size);
+  // font-weight: $close-font-weight;
+  // line-height: 1;
+  // color: $close-color;
+  // text-shadow: $close-text-shadow;
   @include transition($transition-focus);
-  background: escape-svg($close-icon) no-repeat center / $spacer;
+  background: escape-svg($close-icon) no-repeat center / map-get($spacers, 4);
+  border: 0;
   outline-offset: map-get($spacers, 2);
   opacity: 1;
+  appearance: none;
 
-  .bg-dark & {
+  .bg-dark &,
+  .navbar-dark & {
     background-image: escape-svg($close-icon-dark);
   }
 
   &:hover,
   &:focus {
-    outline: $border-width solid;
-    outline-offset: 0;
+    background-image: escape-svg($close-icon-hover);
 
     &:not(:disabled):not(.disabled) {
       opacity: 1;
     }
   }
 
+  &:focus {
+    outline: $border-width solid;
+    outline-offset: 0;
+  }
+
   &:hover {
     @include transition(none);
   }
@@ -41,13 +47,13 @@
 // 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; // Boosted mod
-  //background-color: transparent; // Boosted mod
-  border: 0;
-  appearance: none;
-}
+// Boosted mod: included above ↑
+// button.close {
+//   padding: 0;
+//   background-color: transparent;
+// border: 0;
+// appearance: none;
+// }
 
 // Future-proof disabling of clicks on `<a>` elements
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1230,12 +1230,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-font-size:                   $font-size-base * 1.5 !default; // Boosted mod
+//$close-font-weight:                 $font-weight-bold !default; // Boosted mod
+//$close-color:                       $black !default; // Boosted mod
 $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
+$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; // Boosted mod
+$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; // Boosted mod
+$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; // Boosted mod
 
 
 // Code