mirror of
https://github.com/datahub-project/datahub.git
synced 2025-07-26 02:50:01 +00:00
84 lines
2.6 KiB
SCSS
84 lines
2.6 KiB
SCSS
/// Contains all application wide Sass functions.
|
||
|
||
/// Native `url(..)` function wrapper
|
||
/// @param {String} $base - base URL for the asset
|
||
/// @param {String} $type - asset type folder (e.g. `fonts/`)
|
||
/// @param {String} $path - asset path
|
||
/// @return {Url}
|
||
@function asset($base, $type, $path) {
|
||
@return url($base + $type + $path);
|
||
}
|
||
|
||
/// Returns URL to an image based on its path
|
||
/// @param {String} $path - image path
|
||
/// @param {String} $base [$base-url] - base URL
|
||
/// @return {Url}
|
||
/// @require $base-url
|
||
@function image($path, $base: $base-url) {
|
||
@return asset($base, 'images/', $path);
|
||
}
|
||
|
||
/// Returns URL to a font based on its path
|
||
/// @param {String} $path - font path
|
||
/// @param {String} $base [$base-url] - base URL
|
||
/// @return {Url}
|
||
/// @require $base-url
|
||
@function font($path, $base: $base-url) {
|
||
@return asset($base, 'fonts/', $path);
|
||
}
|
||
|
||
/// Get a z-index value from a layer name
|
||
/// @access public
|
||
/// @param {String} $layer - Layer’s name
|
||
/// @return {Number}
|
||
/// @require $z-indexes
|
||
@function z($layer) {
|
||
@if map-has-key($z-indexes, $layer) {
|
||
@return map-get($z-indexes, $layer);
|
||
}
|
||
|
||
@warn '#{$layer} not found in `$z-indexes`';
|
||
@return null;
|
||
}
|
||
|
||
/// Get a font-weight from the $font-weight map
|
||
/// @param {String} $style - the font-style to look up
|
||
/// @param {Number} $weight - number for the previous style to be looked up
|
||
/// @return {Number}
|
||
/// @require $font-weights
|
||
@function fw($style, $weight) {
|
||
@if map-has-key($font-weights, $style) {
|
||
@return map-get(map-get($font-weights, $style), $weight);
|
||
}
|
||
|
||
@warn '#{$style} not found in `$font-weights` list';
|
||
@return null;
|
||
}
|
||
|
||
/// Progressively add black as you decrease the proportion of the color
|
||
/// Provides more subtle transitions than darken
|
||
/// @param {Color} $color - color to shade
|
||
/// @param {Number} $percentage - percentage of `$color` in output
|
||
/// @return {Color}
|
||
@function shade($color, $percentage) {
|
||
@return mix(black, $color, $percentage);
|
||
}
|
||
|
||
/// Progressively add white as you decrease the proportion of the color
|
||
/// Provides more subtle transitions than lighten
|
||
/// @param {Color} $color - color to tint
|
||
/// @param {Number} $percentage - percentage of `$color` in output
|
||
/// @return {Color}
|
||
@function tint($color, $percentage) {
|
||
@return mix(white, $color, $percentage);
|
||
}
|
||
|
||
/// Retrieves a color from the map $color-sheme
|
||
/// @param {Color} $color - the color to get from the map
|
||
/// @param {Hue} $hue - the hue to get from the specified color map
|
||
/// @return {Color}
|
||
/// @require $color-scheme
|
||
@function set-color($color, $hue) {
|
||
@return map-get(map-get($color-scheme, $color), $hue);
|
||
}
|