PHP Classes

File: engine/modules/contrib/foundation/source/scss/components/_close-button.scss

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/components/_close-button.scss   Download  
File: engine/modules/contrib/foundation/source/scss/components/_close-button.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 3,098 bytes
 

Contents

Class file image Download
// 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) } } }