103 lines
3.0 KiB
SCSS
103 lines
3.0 KiB
SCSS
// Foundation for Sites by ZURB
|
|
// foundation.zurb.com
|
|
// Licensed under MIT Open Source
|
|
|
|
////
|
|
/// @group close-button
|
|
////
|
|
|
|
/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
|
|
/// @type List
|
|
$closebutton-position: right top !default;
|
|
|
|
/// Right (or left) offset(s) for a close button.
|
|
/// @type Number|Map
|
|
$closebutton-offset-horizontal: (
|
|
small: 0.66rem,
|
|
medium: 1rem,
|
|
) !default;
|
|
|
|
/// Top (or bottom) offset(s) for a close button.
|
|
/// @type Number|Map
|
|
$closebutton-offset-vertical: (
|
|
small: 0.33em,
|
|
medium: 0.5rem,
|
|
) !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
|
|
$closebutton-lineheight: 1 !default;
|
|
|
|
/// Default color of the close button.
|
|
/// @type Color
|
|
$closebutton-color: $dark-gray !default;
|
|
|
|
/// Default color of the close button when being hovered on.
|
|
/// @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);
|
|
$y: nth($closebutton-position, 2);
|
|
|
|
@include disable-mouse-outline;
|
|
position: absolute;
|
|
color: $closebutton-color;
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $closebutton-color-hover;
|
|
}
|
|
}
|
|
|
|
@mixin foundation-close-button {
|
|
.close-button {
|
|
@include close-button;
|
|
|
|
&.small { @include close-button-size(small) }
|
|
&, &.medium { @include close-button-size(medium) }
|
|
}
|
|
}
|