coffeekraken-s-gradient-component
Version:
Provide a nice way to apply a gradient on top of some HTMLElements
1,523 lines (1,517 loc) • 156 kB
CSS
@charset "UTF-8";
/**
* Parse and return the Map respresentation of a border property
* The $border argument will be parsed with the [s-parse-properties](../core/functions/_s-parse-properties.scss) function.
*
* @param {List} $border The border property to parse
* @return {Map} The Map represenration of the border
*
* @example
* s-border-map(1px solid white);
* // return
* // (
* // width : 1px,
* // color : white,
* // style : solid
* // )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the Map representation of a columns properties
* @param {Interger} [$count=null] The number of columns
* @param {Number} [$gap=null] The gap width between each columns
* @param {String} [$fill=null] The fill property (balance,auto,initial,inherit)
* @param {Number} [$width=null] The width of the columns
* @param {Integer|String} [$span=null] The column-span property (1,all,initial,inherit)
* @param {List} [$rule=null] The column-rule property
* @param {String} [$rule-style=null] The column-rule-style property
* @param {Color} [$rule-color=null] The column-rule-color property
* @param {Number} [$rule-width=null] The column-rule-width property
* @return {Map} The map representation or the columns properties
*
* @example
* s-columns-map(2, 20px);
* // return
* // (
* // column-count : 2,
* // column-gap : 20px
* // )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Parse and return the Map respresentation of a margin property
* The $margin argument will be parsed with the [s-parse-properties](../core/functions/_s-parse-properties.scss) function.
*
* @param {List|Number} $margin The margin property to parse
* @return {Map} The map representation
*
* @example
* s-margin-map(10px); // => ( top:10px, right:10px, bottom:10px, left:10px )
* s-margin-map(10px 20px); // => ( top:10px, right:20px, bottom:10px, left:20px )
* s-margin-map(5px 10px 15px 20px); // => ( top:5px, right:10px, bottom:15px, left:20px )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the representation of a position styling like position:absolute; top:0; left:100%; etc...
* This function gives you some shortcuts to align your element top, bottom, middle, center, etc...
*
* @param {String} [$position=absolute] The position css property
* @param {String} [$vertical-align=top] The vertical alignement wanted (top,middle,bottom)
* @param {String} [$align=left] The horizontal alignement wanted (left,center,right)
* @param {Number} [$top=null] The top property wanted
* @param {Number} [$right=null] The right property wanted
* @param {Number} [$bottom=null] The bottom property wanted
* @param {Number} [$left=null] The left property wanted
* @return {Map} The map representation of the position wanted
*
* @example
* s-position-map(absolute, top, right);
* s-position-map(absolute, middle, center);
* s-position-map(relative, bottom, right);
* s-position-map(absolute, bottom, center);
* // etc...
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the Map properties representation for the rhythme width
* The rhythme width is the width of an element that target a certain number of letters by line
*
* @param {Integer} [$letters-count=settings.typography.line-letters-count] The number of letters to target by line
* @return {Map} The Map properties representation
*
* @example
* s-rhythm-width(50);
* // return
* // (
* // display : block,
* // max-width : 50ex
* // )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the Map properties representation of a translate x,y and z
*
* @param {Number} [$x=0] The x translate value
* @param {Number} [$y=0] The y translate value
* @param {Number} [$z=0] The z translate value
* @return {Map} The translate Map representation
*
* @example
* s-translate-map(10px,20px);
* // return
* // (
* // transform: translateX(10px) translateY(20px) translateZ(0)
* // )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Helper mixin to set a background image
*
* @param {String} [$repeat=null] The background-repeat property
* @param {String} [$size=null] The background-size property
* @param {String} [$attachment=null] The background-attachment property
* @param {String} [$blend-mode=null] The background-blend-mode property
* @param {String} [$clip=null] The background-clip property
* @param {String} [$url=null] The background-image url property
* @param {Number} [$width=null] The background-size width property
* @param {Number} [$height=null] The background-size height property
* @param {Number} [$top=null] The background-position top property
* @param {Number} [$left=null] The background-position left property
* @param {String} [$suffix2x=@2x] The suffix to add the the url if the 2x resolution if wanted
* @param {String} [$suffix3x=@3x] The suffix to add the the url if the 3x resolution if wanted
* @param {String} [$suffix4x=@4x] The suffix to add the the url if the 4x resolution if wanted
* @param {List} [$resolution=null] The resolution wanted like 2x, 3x and 4x
* @param {List} [$position=null] The background-position property
*
* @example
* .my-cool-element {
* \@include s-background(
* $url : 'img/my-cool-image.jpg',
* $size : cover,
* resolution : 2x 3x 4x
* );
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply some border radius
* @param {Number} [$radius=null] The radius to apply globally
* @param {Number} [$top=null] The radius to apply on top corners
* @param {Number} [$right=null] The radius to apply on right corners
* @param {Number} [$bottom=null] The radius to apply on bottom corners
* @param {Number} [$left=null] The radius to apply on left corners
* @param {Number} [$top-left=null] The radius to apply on top-left corners
* @param {Number} [$top-right=null] The radius to apply on top-right corners
* @param {Number} [$bottom-left=null] The radius to apply on bottom-left corners
* @param {Number} [$bottom-right=null] The radius to apply on bottom-right corners
*
* @example scss
* .my-cool-item {
* // apply on top left and right corners
* \@include s-border-radius(
* $top : 10px;
* );
* // apply on each corners
* \@include s-border-radius(10px);
* // etc...
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Center a block element using margins etc...
* @example scss
* .my-cool-block-element {
* \@include s-center-block();
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* @name s-clearfix
* Apply a clearfix on the element.
* Supported methods:
* - micro
* - facebook
* - float
* - micro
*
* @param {String} [$method=micro] The clearfix method to use
*
* @example scss
* .my-cool-element {
* \@include s-clearfix();
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
.clearfix-overflow {
overflow: hidden;
}
.clearfix-facebook {
display: table-cell;
vertical-align: top;
width: 10000px !important;
}
.clearfix-float {
float: left;
width: 100%;
}
.clearfix, .clearfix-micro {
zoom: 1;
}
.clearfix:before, .clearfix-micro:before, .clearfix:after, .clearfix-micro:after {
content: " ";
display: table;
}
.clearfix:after, .clearfix-micro:after {
clear: both;
}
/**
* Display a coffeekraken logo with two specified colors
* @param {Color} [$color=default] The base color to use
* @param {Color} [$accent=primary] The accent color to use
*
* @example scss
* .my-cool-coffeekraken-logo {
* \@include s-coffeekraken-logo();
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Create a column layout my setting each columns properties at once
* @param {Integer} [$count=null] The number of columns wanted
* @param {Number} [$gap=null] The column-gap width wanted
* @param {String} [$fill=null] The column-fill wanted
* @param {Number} [$width=null] THe width of each columns wanted
* @param {String} [$span=null] Specify on how many columns the element has to span across
* @param {List} [$rule=null] Specify the shorthand version of the column-rule-color, column-rule-style and column-rule-width
* @param {String} [$rule-style=null] Specify the column-rule-style wanted
* @param {Color} [$rule-color=null] Specify the column-rule-color wanted
* @param {Number} [$rule-width=null] Specify the column-rule-width wanted
*
* @example scss
* .my-cool-container {
* \@include s-columns(
* $count : 3,
* $gap : 30px,
* $span : solid s-color(primary) 20px
* );
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply some border radius
* @param {Number} [$radius=null] The radius to apply globally
* @param {Number} [$top=null] The radius to apply on top corners
* @param {Number} [$right=null] The radius to apply on right corners
* @param {Number} [$bottom=null] The radius to apply on bottom corners
* @param {Number} [$left=null] The radius to apply on left corners
* @param {Number} [$top-left=null] The radius to apply on top-left corners
* @param {Number} [$top-right=null] The radius to apply on top-right corners
* @param {Number} [$bottom-left=null] The radius to apply on bottom-left corners
* @param {Number} [$bottom-right=null] The radius to apply on bottom-right corners
*
* @example scss
* .my-cool-item {
* // apply on top left and right corners
* \@include s-corner(
* $top : 10px;
* );
* // apply on each corners
* \@include s-corner(10px);
* // etc...
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Make the element fit his container.
* @param {String} [$position=null] The position how to fit the element.
*
* @example scss
* .my-cool-element {
* \@include s-fit(absolute);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Hide the contained text
*
* @example scss
* .my-cool-container {
* \@include s-hide-text();
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply an icon on the element. This mixin support font-awesome and custom icons systems that have an icon name formated like "icon-{name}"
* @param {String} $name The icon name to apply
*
* @example scss
* .my-cool-icon {
* \@include s-icon(fa-user);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Set how to render the image
* @param {String} [$mode=auto] The mode to use to render the image
*
* @example scss
* img {
* \@include s-image-rendering(crips-edges);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Set how the list bullet has to be displayed.
* @param {String} [$type=null] The list type to use. Can be all the list-style-type values
* @param {Url} [$image=null] An image url to use as bullet
* @param {String} [$icon=null] An icon name to use as bullet. Will use the s-icon mixin under the hood
* @param {Color} [$color=s-color(default)] The color to use for the bullet
* @param {Number} [$size=null] The size to use for the bullet
* @param {Number|List<Number>} [$offset=null] A number that represent the top offset, or a list of two numbers that represent the top, left offset
* @param {String} [$font=null] The font name to use for the bullet
* @param {Number} [$space=null] The space between the bullet and the content
*
* @example scss
* .my-cool-list__item {
* @\include s-list-bullet(
* $image : '../img/my-cool-bullet.svg',
* $offset : 5px 10px,
* $size : 1em,
* $space : 2em
* );
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Start a new list
* @param {String} [$counter-reset=s-list] A counter name to reset
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Easy to use media query mixin that support cssua classes to target specific browsers
* @param {String} [$screen=null] Any of the @media screen type property like "screen, handheld, print, etc..."
* @param {Number} [$min-width=null] The min width to target
* @param {Number} [$max-width=null] The max width to target
* @param {Number} [$min-height=null] The min height to target
* @param {Number} [$max-height=null] The max height to target
* @param {String} [$orientation=null] The orientation to target. Can be portrait or landscape
* @param {String} [$resolution=null] The resolution to target. Can be 2x, 3x, 4x, etc...
* @param {String} [$engine=null] The engine that powers the display. Can be gecko, webkit, trident, blink or presto
* @param {String} [$device=null] The device to target. Can be mobile, tablet, desktop, iphone or ipad
* @param {String} [$browser=null] The browser(s) to target. Can be chrome, safari, firefox, opera, ie, ie6-20
* @param {String} [$system=null] The system(s) to target. Can be ios, osx, windows, linux, android, webos or blackberry
*
* @example scss
* // simple min width
* \@include s-media(
* $min-width : 200px
* ) {
* // custom css here...
* }
*
* // target a specific engine
* \@include s-media(
* $engine : gecko webkit
* ) {
* // custom css here
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Set the placeholder style for inputs, etc...
*
* @example scss
* input, textarea {
* \@include s-placeholder() {
* color : red;
* }
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Set a complexe position styling like position:absolute; top:0; left:100%; etc...
* This mixin gives you some shortcuts to align your element top, bottom, middle, center, etc...
*
* @param {String} [$position=absolute] The position css property
* @param {String} [$vertical-align=top] The vertical alignement wanted (top,middle,bottom)
* @param {String} [$align=left] The horizontal alignement wanted (left,center,right)
* @param {Number} [$top=null] The top property wanted
* @param {Number} [$right=null] The right property wanted
* @param {Number} [$bottom=null] The bottom property wanted
* @param {Number} [$left=null] The left property wanted
* @return {Map} The map representation of the position wanted
*
* @example
* .my-cool-element {
* // absolute top right
* \@include s-position(absolute, top, right);
* // custom right and bottom values
* \@include s-position(absolute,
* $bottom : 20px,
* $right : 20px
* );
* // etc...
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply a ratio css styling. This will apply a before or after content that will make the element keep the specified ratio.
* The content need to be displayed as absolute top left and fit in size.
*
* @param {Number} $ratio The ratio to keep like 16/9, etc...
* @param {String} [$type=before] The type of ratio to apply. Can be before or after
*
* @example scss
* .my-cool-element {
* \@include s-ratio(16/9);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print out a reset css
* @example scss
*
* \@include s-reset();
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print out the css on a container that will make the lines displays a maximum number of characters.
*
* @example scss
* h1 {
* \@include s-rhythm-width(45);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply some css to have a rounded element with already an overflow on it
*
* @param {Number} [$size=null] The size (width and height) of the element wanted
* @param {Number} [$width=null] The width of the element wanted
* @param {Number} [$height=null] The height of the element wanted
*
* @example scss
* .my-cool-image {
* \@include s-round(100px);
*
* img {
* \@include s-size(cover);
* }
* }
*/
/**
* Quicky and easily set simple or complexe size to any element
* @param {String|Number} $size-width The size like "cover" or "contain", or the width un number
* @param {Number} [$height=null] The height wanted
* @param {String} [$position=absolute] The position wanted if the size is "cover" or "contain"
*
* @example scss
* .my-cool-image {
* \@include s-size(cover);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Quicky set some translates
* @param {Number} [$x=0] The x translate value
* @param {Number} [$y=0] The y translate value
* @param {Number} [$z=0] The z translate value
*
* @example
* .my-cool-element {
* \@include s-translate(50%, 20px);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print out the style to truncate the text if needed
*
* @example scss
* h1 {
* \@include s-truncate-text();
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Vertically align content by using the inline-block middle trick
*
* @example scss
* .my-cool-container {
* \@include s-vertical-aligner();
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Hide an element only visually. This ensure that the element is still correctly displayed in the page for SEO
* but will not being visible to the user
*
* @example scss
* .my-cool-element {
* \@include s-visually-hidden();
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Get a registered color by name or wrap a new color into a s-color call
* to manipulate it with ease.
* Supported actions :
* - hue {Deg}
* - lighten {Percent}
* - darken {Percent}
* - saturate {Percent}
* - desaturate {Percent}
* - grayscale {Boolean}
* - complement {Boolean}
* - invert {Boolean}
* - opacity {Percent}
* - mix {Color}
*
* @param {String|Color} $color The color name or the color value to manipulate
* @param {String|List} [$modifier=null] The color modifier to apply. Can be a registered modifier name or a modifier list
* @return {Color} The actual color value
*
* @example scss
* // default color (settings.colors.default)
* $myColor : s-color(default);
* // primary color (settings.colors.primary)
* $primary : s-color(primary);
* // manipulate
* $primary-dark : s-color(primary, -darken 10%);
* // registered modifier
* $primary-light : s-color(primary, light);
* // $name as list
* $modified primary : s-color((primary, -darken 10%));
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the color in a modifier list
* @param {List} $modifiers The modifiers list
* @return {String} The color name
*
* @example
* $my-color : s-color-modifier(outline primary); // => primary
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the name of the top level component setted with the [../mixins/_s-component.scss] mixin
*
* @param {String} [$default=null] The name to return if no top component name exist
* @return {String} The component name
*
* @example
* s-component('hello') // => 'hello'
* \@include s-component('my-component') {
* s-component('hello') // => 'my-component'
* \@include s-component('another-component') {
* s-component('hello') // => 'my-component'
* }
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>;
*/
/**
* Convert a passed value to the wanted unit
* The conversion between some units that depends on a font-size will take the settings.typography.font-size value as reference.
*
* Available conversions
* - from px
* - to em
* - to rem
* - to pt
* - to %
*
* - from em
* - to rem
* - to px
* - to pt
* - to %
*
* - from pt
* - to em
* - to rem
* - to px
* - to pt
* - to %
*
* - from rem
* - to em
* - to px
* - to pt
* - to %
*
* @param {Number} $value The value to convert
* @param {String} $unit The unit in which to convert the value
* @return {Number} The converted value
*
* @example
* // if the settings.typography.font-size === 16px
* s-convert(24px, rem) // 1.5rem
* s-convert(3rem, pt) // 36pt
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Transform a dash notation value into a map
* Dash notation value is : -key1 value1 -key2 value2
*
* @param {List} $dash The dash list notation to transform
* @return {Map} The map generated
*
* @example
* $dash : -hello world -coco universe
* s-dash-to-map($dash);
* // (
* // hello : world,
* // coco : universe
* // )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Convert the passed value to em
*
* @param {Number} $value The value to convert
* @return {Number} The em converted value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Convert the passed value to the closest even value
*
* @param {Number} $value The value to convert
* @return {Number} The closest even converted value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Take a filter as parameter and parse it to return the {Map} corresponding
* The $filter parameter can be either a registered filter name or a filter formated like `filterName(filterValue)`
*
* @param {List}<String> $filter The registered filter name or the filter string to transform into map
* @return {Map} The corresponding filter map properties
*
* @example
* // register a filter
* \@include s-setup((
* filters : (
* myCoolFilter : box-shadow(#000 0 0 10px) blur(30px),
* // other filters...
* )
* ));
*
* // registered filter
* s-filter-map(myCoolFilter);
* // {
* // box-shadow : #000 0 0 10px,
* // blur : 30px
* // }
*
* // custom filter
* s-filter-map(blur(10px));
* // {
* // blur : 10px
* // }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return a list with all the filters that are passed as argument
* This will use the [./_s-filter-map.scss] function to parse the filters
*
* @param {List}<String> $filters The registered filter(s) name(s) or the filter(s) string(s) to transform into list
* @return {List} The converted filters list to use as css property
*
* @example
* // register a filter
* \@include s-setup((
* filters : (
* myCoolFilter : box-shadow(#000 0 0 10px) blur(30px),
* // other filters...
* )
* ));
*
* // registered filter
* .my-cool-elememt {
* filter : s-filter(myCoolFilter);
* // filter : box-shadow(#000 0 0 10px) blur(30px);
* }
*
* // custom filter
* .my-cool-element {
* filter : s-filter(myCoolFilter invert(100%));
* // filter : box-shadow(#000 0 0 10px) blur(30px) invert(100%);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the font-family string or a registered font
*
* @param {String} $name The name of the registered font
* @return {String} The corresponding font-family property to set in your css
*
* @example
* // register a font
* \@include s-setup((
* fonts : (
* myCoolFont : (
* font-family : 'Helvetica Neue',
* font-weight : 'bold',
* // etc...
* ),
* // other fonts...
* )
* ));
*
* // apply the font
* .my-cool-element {
* font-family : s-font-family(myCoolFont);
* // font-family : 'Helvetica Neue';
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the font {Map} that correspond to the passed arguments
*
* @param {String} [$family=null] The font family wanted (can be a registered font name)
* @param {Color} [$color=null] The color wanted (can be a registered color name)
* @param {Number} [$size=null] The font-size wanted
* @param {String} [$style=null] The font-style wanted
* @param {String} [$variant=null] The font-variant wanted
* @param {String|Number} [$weight=null] The font-weight wanted
* @param {String} [$decoration=null] The text-decoration wanted
* @param {String} [$align=null] The text-align wanted
* @param {String} [$transform=null] The text-transform wanted
* @param {String} [$stretch=null] The font-stretch wanted
* @param {String} [$white-space=null] The white-space wanted
* @param {Number} [$height=null] The line-height wanted
* @param {Number} [$spacing=null] The letter-spacing wanted
* @param {Number} [$indent=null] The text-indent wanted
* @param {String} [$break=null] The line-break wanted
* @param {String} [$wrap=null] The word-wrap wanted
* @return {Map} The corresponding font map
*
* @example
* s-font(
* $family : 'Helvetica Neue',
* $size : 12px,
* $wrap : norwap
* );
* // (
* font-family : 'Helvetica Neue',
* font-size : 12px,
* word-wrap : nowrap
* // )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Check if the provided color is a registered one or not
* @param {String} $color The color nane to check
* @return {Boolean} True if exists, false if not
*/
/**
* Return the specified or calculated value of the given stack and size
* depending on the settings.sizes ratios stack
*
* @param {Map} $stack The stack from which to interpolate the value
* @param {String} $size The size wanted (has to exist in the settings.sizes stack)
* @return {Number} The $stack.$size value or the interpolated one depending on the settings.sizes ratios
*
* @example
*
* // settings.sizes
* \@include s-setup((
* sizes : (
* small : 0.5,
* default : 1, // default is ALWAYS 1
* big : 1.5
* )
* ));
*
* $myStack : (
* default : 3rem,
* big : 6rem
* )
*
* s-interpolate($myStack, big) // 6rem cause specified in the $myStack value
* s-interpolate($myStack, small) // 1.5rem => calculated like : 3rem * 0.5 = 1.5rem
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Check if the passed value is of a certain type
*
* Here's the available types that you can check
* - mixed => mean anything
* - null
* - url
* - px
* - pt
* - rem
* - em
* - percent | %
* - vw
* - vh
* - ex
* - ch
* - cm
* - mm
* - in
* - pc
* - s | second
* - boolean | bool
* - function
* - number
* - int | integer
* - string
* - color
* - list
* - map
* - deg | degree
* - list-{type} => check if is a list of the specified type
* - map-{type} => check if is a map of the specified type
*
* @param {Mixed} $value The value to check
* @param {String} $type The type to check
* @return {Boolean} true if match the type, false if not
*
* @example
* s-is(hello, string) // => true
* s-is('hello', string) // => true
* s-is(#fff, color) // => true
* s-is(hello #fff, list-color) // => false
* s-is(#fff #ddd, list-color) // => true
* // etc...
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Alias to the [./_s-look-and-feel.scss] function
*
* Return a settings.look-and-feel stack value
*
* @param {String} $name The look and feel value name
* @return {Number} The look and feel value in em
*
* @example
* .my-cool-element {
* padding : s-lnf(padding-horizontal) s-lnf(padding-vertical);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return a settings.look-and-feel stack value
*
* @param {String} $name The look and feel value name
* @return {Number} The look and feel value in em
*
* @example
* .my-cool-element {
* padding : s-look-and-feel(padding-horizontal) s-look-and-feel(padding-vertical);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the modular scale value based on the settings ```modular-scale.base``` and ```modular-scale.ratio```.
*
* @param {Number} $scale The wanted scale
* @param {Number} [$base=settings.modular-scale.base] The base of calculation
* @return {Number} The calculated resulting value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Convert the passed value to the closest odd value
*
* @param {Number} $value The value to convert
* @return {Number} The closest odd converted value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Parse a given string/list properties and return the Map corresponding to the Map description
*
* @param {List} $properties The properties to parse
* @param {Map} $descriptor The descriptor map to use to parse the properties
* @return {Map} The properties in map format
*
* @example
* s-parse-properties(10px hello -delay 20s, (
* myNumber : Number,
* myOtherNumber : Number,
* myString : String,
* myCoolVar : String,
* delay : second
* ));
* // => (
* // myNumber : 10px,
* // myString : hello,
* // delay : 20s
* // )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Convert the passed value to %
*
* @param {Number} $value The value to convert
* @return {Number} The % converted value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Convert the passed value to pt
*
* @param {Number} $value The value to convert
* @return {Number} The pt converted value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Convert the passed value to px
*
* @param {Number} $value The value to convert
* @return {Number} The px converted value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Convert the passed value to rem
*
* @param {Number} $value The value to convert
* @return {Number} The rem converted value
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the passed values in the same unit but that has been even rounded on the corresponding px value
* This ensure that your passed value will be a round px value for final rander in the viewport
*
* @param {Number} $value The value to process
* @return {Number} The rounded value in same input unit but px rounded
*
* @example
* // if settings.typography.font-size == 16px
* s-render-round-even(5.2rem);
* // 1. transform to px values : 5.2 * 16px = 83.2px
* // 2. round even the px value : 84px
* // 3. transform to passed unit value : 84px / 16px = 5.25rem
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the passed values in the same unit but that has been odd rounded on the corresponding px value
* This ensure that your passed value will be a round px value for final rander in the viewport
*
* @param {Number} $value The value to process
* @return {Number} The rounded value in same input unit but px rounded
*
* @example
* // if settings.typography.font-size == 16px
* s-render-round-odd(5.2rem);
* // 1. transform to px values : 5.2 * 16px = 83.2px
* // 2. round odd the px value : 83px
* // 3. transform to passed unit value : 84px / 16px = 5.1875rem
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the passed values in the same unit but that has been rounded on the corresponding px value
* This ensure that your passed value will be a round px value for final rander in the viewport
*
* @param {Number} $value The value to process
* @return {Number} The rounded value in same input unit but px rounded
*
* @example
* // if settings.typography.font-size == 16px
* s-render-round(5.2rem);
* // 1. transform to px values : 5.2 * 16px = 83.2px
* // 2. round even the px value : 83px
* // 3. transform to passed unit value : 84px / 16px = 5.1875rem
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Search and replace tokens like colors #primary in a passed string, list or map
* Supported tokens types :
* 1. Colors : colorName
*
* @example
* s-replace-tokens(12px #primary hello #secondary); // > 12px #ddd hello #fff;
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Process selector to avoid having --default, etc...
* @param {String} $selector The selector to process
* @return {String} The processed selector
* @example scss
* s-selector('.input--default'); // => .input
* s-selector('.input-default'); // => .input
* s-selector('.input.default'); // => .input
*/
/**
* Get a settings from the global settings stack
*
* @param {String} $path The setting path wanted separated by dots
* @param {String} [$context=s-context()] The context name to get the setting
* @param {Mixed} [$default=null] The value to return if no value is found
* @return {Mixed} The setting value¨
*
* @example
* $font-size : s-setting('typography.font-size');
* // etc...
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return a value interpolated from the settings.spaces stack
*
* @param {String} $size The space size wanted. Must exist in the settings.sizes stack
* @return {Number} The actual space value
*
* @example
* .my-cool-section {
* padding : s-pace(big);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return a number without any units
*
* @param {Number} $number The number to process
* @return {Number} The number without units
*
* @example
* s-strip-units(12px); // => 12
* s-strip-units(30rem); // => 30
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Test an argument passed to a function or a mixin to ensure his type, value, etc...
* If the argument does not pass the test, an error will be thrown, unless the $check-only argument is true
*
* @param {String} $method The function/mixin name (debug purpose)
* @param {String} $argument The argument name to test (debug purpose)
* @param {List|String} $type-or-values If string, the type(s) that the argument must match, if list, the possible values that the argument can take
* @param {Mixed} $value The actual argument value
* @param {Boolean} [$check-only=false] If this is true, will not thrown any error
* @return {Mixed} The value if ok, false if not
*
* @example
* \@mixin my-cool-mixin($argument1, $argument2) {
* $argument1 : s-test-argument(my-cool-mixin, argument1, string, $argument1);
* $argument2 : s-test-argument(my-cool-mixin, argument2, (hello,world,12), $argument2);
* }
* \@mixin my-cool-mixin(hello, world); // ok
* \@mixin my-cool-mixin(hello, universe); // throw an error
* \@mixin my-cool-mixin(12, world); // throw an error
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the text-format setting scope class
* @return {String} The text-format scope class from settings.text-format.scope-class
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Take a transition as parameter and parse it to return the {Map} corresponding
* The $transition parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s
* The $transition argument will be parsed with the [./_s-parse-properties.scss] function.
*
* @param {List} $transition The registered transition name or the transition string to transform into map
* @return {Map} The corresponding transition map properties
*
* @example
* // register a transition
* \@include s-setup((
* transitions : (
* fast : all .2s ease-in-out,
* // other transitions...
* )
* ));
*
* // registered transition
* s-transition-map(fast);
* // {
* // property : all,
* // duration : .2s,
* // ease : ease-in-out
* // }
*
* // custom transition
* s-transition-map(fast -delay .5s);
* // {
* // property : all,
* // duration : .2s,
* // ease : ease-in-out,
* // delay : .5s
* // }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Take a transition as parameter and parse it to return the {List} corresponding
* The $transitions parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s
* The $transitions argument will be parsed with the [./_s-parse-properties.scss] function.
*
* @param {List} $transitions The registered transition(s) name(s) or the transition(s) strings(s) to transform into list
* @return {List} The corresponding transition list properties
*
* @example
* // register a transition
* \@include s-setup((
* transitions : (
* fast : all .2s ease-in-out 0s,
* // other transitions...
* )
* ));
*
* // registered transition
* .my-cool-element {
* transition : s-transition(fast);
* // transition : all .2s ease-in-out 0s;
* }
*
* // custom transition
* .my-cool-element {
* transition : s-transition(fast -delay .5s, fast width ease-in);
* // transition : all .2s ease-in-out .5s, width .2s ease-in 0s;
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the unit context if has been set by the [s-unit-context mixin](../mixins/_s-unit-context.scss)
*
* @return {String} The unit context setted
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Return the vertical-rhythm setting scope class
* @return {String} The vertical-rhythm scope class from settings.vertical-rhythm.scope-class
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Generic sugar function can return multiple settings types like:
* - any settings : s('settings.{path}')
* - look and feel : s('look-and-feel.{property}', $size)
* - s('lnf.{property}', $size)
* - space : s('space.{size}')
* - color : s('color.{name}', $modifier)
* - transition : s('transition.{name}')
* - filter : s('filter.{name}')
*
* @example
* $my-color : s('color.primary');
* $my-transition : s('transition.fast');
* $my-font-size : s('settings.typography.font.size')
* // etc...
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print out the animation property calculated with the passed arguments
* This mixin support all the standard css animation properties like name, duration, delay, ease, direction and fill-mode.
* The $animations argument will be parsed with the [../functions/_s-parse-properties.scss] function.
* If you specify multiple animations at a time, this mixin will take care
* of the delay calculation for each animations and make them play one after another
*
* @param {List} $animations The animations wanted like : coco .2s ease-in-out reverse
*
* @example
* .my-cool-element {
* @include s-animation(my-animation 1s ease-in-out, another-animation 4s);
* // animation : my-animation 1s 0s ease-in-out 1 normal forwards, another-animation 4s 1s ease-in-out 1 normal forwards;
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print out all wanted registered classes like padding helpers, margin helpers, font helpers, etc...
* Available namespaces
* - sugar.filter.{name} : .fi-{name}
* - sugar.transition.{name} : .tr-{name}
* - sugar.font.family.{name} : .f-{name}
* - sugar.margin.bottom.{size} : .m-b-{size}
* - sugar.margin.top.{size} : .m-t-{size}
* - sugar.margin.left.{size} : .m-l-{size}
* - sugar.margin.right.{size} : .m-r-{size}
* - sugar.margin.side.{size} : .m-s-{size}
* - sugar.padding.all.{size} : .p-{size}
* - sugar.padding.top.{size} : .p-t-{size}
* - sugar.padding.bottom.{size} : .p-b-{size}
* - sugar.padding.left.{size} : .p-l-{size}
* - sugar.padding.right.{size} : .p-r-{size}
* - sugar.padding.side.{size} : .p-s-{size}
* - sugar.size.{size} : .s-{size}
* - sugar.size.rel.{size} : .s-{size}-rel
* - sugar.padding.no.top : .no-p-t
* - sugar.padding.no.bottom : .no-p-b
* - sugar.padding.no.left : .no-p-l
* - sugar.padding.no.right : .no-p-r
* - sugar.padding.no.side : .no-p-s
* - sugar.margin.no.top : .no-m-t
* - sugar.margin.no.bottom : .no-m-b
* - sugar.margin.no.left : .no-m-l
* - sugar.margin.no.right : .no-m-r
* - sugar.margin.no.side : .no-m-s
* - sugar.color.{name}.color` .c-{name}
* - sugar.color.{name}.bkg : .bkg-{name}
* - sugar.color.{name}.modifier.{mod-name}.color : .c-{name}--{mod-name}
* - sugar.color.{name}.modifier.{mod-name}.bkg : .bkg-{name}--{mod-name}
* - sugar.pull.left : .pull-left
* - sugar.pull.right : .pull-right
* - sugar.position.relative : .relative
* - sugar.position.absolute : .absolute
* - sugar.clear.left : .clear-left
* - sugar.clear.right : .clear-right
* - sugar.clear.both : .clear
* - sugar.pointer.events.all : .pointer-events-all
* - sugar.pointer.events.none : .pointer-events-none
* - sugar.display.show : .show
* - sugar.display.show-inline : .show-inline
* - sugar.display.hidden : .hidden
* - sugar.display.hide : .hide
* - sugar.display.visible : .visible
* - sugar.display.invisible : .invisible
* - sugar.display.visually-hidden : .visually-hidden
* - sugar.text.hidden : .t-hidden
* - sugar.text.truncate : .t-truncate
* - sugar.text.align.left : .t-left
* - sugar.text.align.right : .t-right
* - sugar.text.align.center : .t-center
* - sugar.text.align.justify : .t-justify
* - sugar.text.transform.lowercase : .t-lowercase
* - sugar.text.transform.uppercase : .t-uppercase
* - sugar.text.transform.capitalize : .t-capitalize
* - sugar.font.weight.bold : .f-bold
* - sugar.font.weight.lighter : .f-lighter
* - sugar.font.weight.bolder : .f-bolder
* - sugar.font.weight.normal : .f-normal
* - sugar.font.style.italic : .f-italic
* - sugar.font.style.oblique : .f-oblique
* - sugar.font.variant.small-caps : .f-small-caps
* - sugar.block.align.center : .block-center
* - sugar.ratio.21-9 : ```.ratio-21-9```
* - sugar.ratio.16-9 : ```.ratio-16-9```
* - sugar.ratio.4-3 : ```.ratio-4-3```
* - sugar.ratio.1-1 : ```.ratio-1-1```
* - sugar.size.abs.cover : ```.abs-cover```
* - sugar.size.abs.contain : ```.abs-contain```
* - sugar.size.abs.fit : ```.abs-fit```
* - sugar.clearfix.default : .clearfix
* - sugar.clearfix.float : .clearfix-float
* - sugar.clearfix.micro : .clearfix-micro
* - sugar.clearfix.overflow : .clearfix-overflow
* - sugar.clearfix.facebook : .clearfix-facebook
* - sugar.no-transitions : .no-transitions
* - sugar.clear-transitions : .clear-transitions
* - sugar.no-animations : .no-animations
* - sugar.clear-animations : .clear-animations
* - sugar.no-transmations : .no-transmations
* - sugar.clear-transmations : .clear-transmations
*
* @param {List}<string> $namespaces The classes namespaces wanted
*
* @example
* \@include s-classes(); // will print out all the classes
* \@include s-classes('sugar.font'); // will print all the font classes
* \@include s-classes('sugar.clearfix' 'sugar.pull'); // the clearfixes and the pull classes
* // etc...
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print out the scoped color schema css
*
* @param {String} $name The color schema name
*
* @example
* \@include s-color-schema(light) {
* h1, h2 {
* color : white;
* }
* }
* // will print
* .cs-light h1,
* .cs-light h2 {
* color : white;
* }
*
* h1, h2 {
* \@include s-color-schema(light) {
* color : white;
* }
* }
* // will print
* .cs-light h1, h1.cs-light,
* .cs-light h2, h2.cs-light {
* color : white;
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Set the name of the component that will be handled inside the mixin
*
* @param {String} [$name=null] The name of the component to set
* @param {String|Map} [$context=null] A context name or map to use inside the mixin
*
* @example
* \@include s-component('my-component') {
* s-component('hello') // => 'my-component'
* \@include s-component('another-component') {
* s-component('hello') // => 'my-component'
* }
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>;
*/
/**
* Register a context with a name to use it later
*
* @param {String} $name The context name
* @param {Map} $settings The settings to override for this context
*
* @example
* \@include s-context-setup(my-cool-context, (
* look-and-feel : (
* padding-vertical : (
* default : 0.6em
* )
* )
* ));
*
* // using your context
* \@include s-context(my-cool-context) {
* s-look-and-feel(padding-vertical); // => 0.6em
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Set a context to be used inside the mixin
*
* @param {String|Map} $name-or-map The name of a registered context or a map
*
* @example
* // register a context
* \@include s-context-setup(my-cool-context, (
* look-and-feel : (
* padding-vertical : (
* default : 0.6em
* )
* )
* ));
*
* // registered context
* \@include s-context(my-cool-context) {
* // your code here...
* }
*
* // inline context
* \@include s-context((
* look-and-feel : (
* padding-vertical : (
* default : .3em
* )
* )
* )) {
* // your code here...
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print out a list with all the filters that are passed as argument
* This will use the [../functions/_s-filter-map.scss] function to parse the filters
*
* @param {List}<String> $filters The registered filter(s) name(s) or the filter(s) string(s) to transform into list
*
* @example
* // register a filter
* \@include s-setup((
* filters : (
* myCoolFilter : box-shadow(#000 0 0 10px) blur(30px),
* // other filters...
* )
* ));
*
* // registered filter
* .my-cool-elememt {
* \@include s-filter(myCoolFilter);
* // filter : box-shadow(#000 0 0 10px) blur(30px);
* }
*
* // custom filter
* .my-cool-element {
* \@include s-filter(myCoolFilter invert(100%));
* // filter : box-shadow(#000 0 0 10px) blur(30px) invert(100%);
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Helper to print a font-face
*
* @param {String} $font-family The font-family
* @param {String} $src The source url (only 1 extension)
* @param {List} [$extensions=woff2] The extensions list that you have available
* @param {String} [$font-weight=normal] The font-weight property
* @param {String} [$font-style=normal] The font-style property
*
* @example
* // if you have these extensions files : .woff .eot .woff2
* \@include s-font-face(
* $name : my-cool-font,
* $src : '/fonts/my-font.eot',
* $extensions : eot woff woff2
* )
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Print all the fonts properties that correspond to the passed arguments
*
* @param {String} [$family=null] The font family wanted (can be a registered font name)
* @param {Color} [$color=null] The color wanted (can be a registered color name)
* @param {Number} [$size=null] The font-size wanted
* @param {String} [$style=null] The font-style wanted
* @param {String} [$variant=null] The font-variant wanted
* @param {String|Number} [$weight=null] The font-weight wanted
* @param {String} [$decoration=null] The text-decoration wanted
* @param {String} [$align=null] The text-align wanted
* @param {String} [$transform=null] The text-transform wanted
* @param {String} [$stretch=null] The font-stretch wanted
* @param {String} [$white-space=null] The white-space wanted
* @param {Number} [$height=null] The line-height wanted
* @param {Number} [$spacing=null] The letter-spacing wanted
* @param {Number} [$indent=null] The text-indent wanted
* @param {String} [$break=null] The line-break wanted
* @param {String} [$wrap=null] The word-wrap wanted
* @return {Map} The corresponding font map
*
* @example
* .my-cool-elememt {
* \@include s-font(
* $family : 'Helvetica Neue',
* $size : 12px,
* $wrap : norwap
* );
* // print
* font-family : 'Helvetica Neue',
* font-size : 12px,
* word-wrap : nowrap
* }
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Init the sugar toolkit.
* This has to be called **AFTER** all the [./_s-setup.scss] mixin call
* and **BEFORE** all the others sugar mixins and functions calls
*
* @example
* \@include s-init();
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Register all the dynamic helper classes that depends on the settings, etc...
* This is used internaly
*
* @example
* \@include s-init-classes();
*
* @author Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Register a helper class under a certain namespace
*
* @param {String} $classname The classname that will be printed out
* @param {String} $namespace The dots separated namespace under which the class will live
*
* @example
* \@include s-register-helper-class(my-cool-class, 'my.cool.namespace') {
* background : pink;
* }
* \@include s-register-helper-class(another-cool-class, 'my.another.namespace') {
* backgroun