Added feature for customizing size and position of the close button

This solution is proposed by @ncoden at:
https://github.com/zurb/foundation-sites/pull/9204

diff --git a/scss/components/_close-button.scss b/scss/components/_close-button.scss
index 0984f0fea91739d8de87add5f673ef4fda2cf563..a6a65e7895c79f1a502281ed3306aeb8e9a74868 100644 (file)
--- a/scss/components/_close-button.scss
+++ b/scss/components/_close-button.scss
@@ -10,17 +10,26 @@
 /// @type List
 $closebutton-position: right top !default;
 
-/// Right (or left) offset for a close button.
-/// @type Number
-$closebutton-offset-horizontal: 1rem !default;
+/// Right (or left) offset(s) for a close button.
+/// @type Number|Map
+$closebutton-offset-horizontal: (
+  small: .66rem,
+  medium: 1rem,
+) !default;
 
-/// Top (or bottom) offset for a close button.
-/// @type Number
-$closebutton-offset-vertical: 0.5rem !default;
+/// Top (or bottom) offset(s) for a close button.
+/// @type Number|Map
+$closebutton-offset-vertical: (
+  small: .33em,
+  medium: .5rem,
+) !default;
 
-/// Default font size of the close button.
-/// @type Number
-$closebutton-size: 2em !default;
+/// Default font size(s) of the close button.
+/// @type Number|Map
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+) !default;
 
 /// The line-height of the close button. It affects the spacing of the element.
 /// @type Number
@@ -34,6 +43,39 @@ $closebutton-color: $dark-gray !default;
 /// @type Color
 $closebutton-color-hover: $black !default;
 
+
+/// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.
+///
+/// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.
+/// @param {Keyword} $size - The size of the close button to use.
+///
+/// @return {Number} The given number or the value found in the map.
+@function -zf-get-size-val($value, $size) {
+  // Check if the value is a number
+  @if type-of($value) == 'number' {
+    // If it is, just return the number
+    @return $value;
+  }
+
+  // Check if the size name exists in the value map
+  @else if map-has-key($value, $size) {
+    // If it does, return the value
+    @return map-get($value, $size);
+  }
+}
+
+/// Sets the size and position of a close button.
+/// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
+@mixin close-button-size($size) {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
+  #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
+  font-size: -zf-get-size-val($closebutton-size, $size);
+  line-height: -zf-get-size-val($closebutton-lineheight, $size);
+}
+
 /// Adds styles for a close button, using the styles in the settings variables.
 @mixin close-button {
   $x: nth($closebutton-position, 1);
@@ -42,10 +84,6 @@ $closebutton-color-hover: $black !default;
   @include disable-mouse-outline;
   position: absolute;
   color: $closebutton-color;
-  #{$x}: $closebutton-offset-horizontal;
-  #{$y}: $closebutton-offset-vertical;
-  font-size: $closebutton-size;
-  line-height: $closebutton-lineheight;
   cursor: pointer;
 
   &:hover,
@@ -57,10 +95,8 @@ $closebutton-color-hover: $black !default;
 @mixin foundation-close-button {
   .close-button {
     @include close-button;
-    
-    &.small {
-      top: 0.25rem;
-      font-size: 1.5em;
-    }
+
+  &.small { @include close-button-size(small) }
+  &, &.medium { @include close-button-size(medium) }
   }
 }

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index af51ab2b6b0e7d0cffc1e6266ab7b3491cc10190..433be2878719997194d9fd6b08e0d5653cd9a05b 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -274,9 +274,18 @@ $callout-link-tint: 30%;
 // ----------------
 
 $closebutton-position: right top;
-$closebutton-offset-horizontal: 1rem;
-$closebutton-offset-vertical: 0.5rem;
-$closebutton-size: 2em;
+$closebutton-offset-horizontal: (
+  small: .66rem,
+  medium: 1rem,
+);
+$closebutton-offset-vertical: (
+  small: .33em,
+  medium: .5rem,
+);
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+);
 $closebutton-lineheight: 1;
 $closebutton-color: $dark-gray;
 $closebutton-color-hover: $black;