Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
2.6 KiB
134 lines
2.6 KiB
/**
|
|
* functions
|
|
*
|
|
*
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* px to em, wrapper of toRelatives
|
|
*
|
|
* @param {mixed} $values
|
|
* @param {mixed} $base
|
|
* @return {rem}
|
|
*/
|
|
@function toEm($values, $base: $crispy__font-size) {
|
|
@return toRelatives($values, 1em, $base);
|
|
}
|
|
|
|
/**
|
|
* px to rem, wrapper of toRelatives
|
|
*
|
|
* @param {mixed} $values
|
|
* @param {mixed} $base
|
|
* @return {rem}
|
|
*/
|
|
@function toRem($values, $base: $crispy__font-size) {
|
|
@return toRelatives($values, 1rem, $base);
|
|
}
|
|
|
|
/**
|
|
* values to relative
|
|
*
|
|
* @param {mixed} $values
|
|
* @param {mixed} $unit
|
|
* @param {mixed} $base
|
|
* @return {number}
|
|
*/
|
|
@function toRelatives($values, $unit, $base: $crispy__font-size) {
|
|
$results: 0;
|
|
|
|
@if type-of($values) == 'number' {
|
|
$results: toRelative($values, $base) * $unit;
|
|
} @else {
|
|
$results: ();
|
|
|
|
@each $value in $values {
|
|
@if $value == 0 {
|
|
$results: append($results, $value);
|
|
}
|
|
@else {
|
|
$results: append($results, toRelative($value, $base) * $unit);
|
|
}
|
|
}
|
|
}
|
|
|
|
@return $results;
|
|
}
|
|
|
|
/**
|
|
* to relative
|
|
*
|
|
* @param {mixed} $value
|
|
* @param {mixed} $base
|
|
* @return {number}
|
|
*/
|
|
@function toRelative($value, $base: $crispy__font-size) {
|
|
@return stripUnit($value) / stripUnit($base);
|
|
}
|
|
|
|
/**
|
|
* strip unit from value
|
|
*
|
|
* @param {mixed} $value
|
|
* @return {number}
|
|
*/
|
|
@function stripUnit($value) {
|
|
@return $value / ($value * 0 + 1);
|
|
}
|
|
|
|
/**
|
|
* function: z-index
|
|
*
|
|
* uses map $crispy__z-index to get value by key
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
@function zIndex($name) {
|
|
@if map-has-key($crispy__z-index, $name) {
|
|
@return map-get($crispy__z-index, $name);
|
|
} @else {
|
|
@warn 'There is no item "#{$name}" in this list; choose one of: #{$crispy__z-index}';
|
|
@return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
* @param {[type]} $directions [description]
|
|
* @return {[type]} [description]
|
|
*
|
|
*/
|
|
@function opposite-direction($directions) {
|
|
$opposite-directions: ();
|
|
$direction-map: (
|
|
'top': 'bottom',
|
|
'right': 'left',
|
|
'bottom': 'top',
|
|
'left': 'right',
|
|
'center': 'center',
|
|
'ltr': 'rtl',
|
|
'rtl': 'ltr'
|
|
);
|
|
|
|
@each $direction in $directions {
|
|
$direction: to-lower-case($direction);
|
|
|
|
@if map-has-key($direction-map, $direction) {
|
|
$opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));
|
|
} @else {
|
|
@warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
|
|
}
|
|
}
|
|
|
|
@return $opposite-directions;
|
|
}
|