53 lines
2.1 KiB
SCSS
53 lines
2.1 KiB
SCSS
/// _functions.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
|
|
|
// Strip Unit - From Foundation
|
|
// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
|
//
|
|
// @param {number} $num - Number to strip unit from.
|
|
// @return The same number, sans unit.
|
|
@function strip-unit($num) {
|
|
@return $num / ($num * 0 + 1);
|
|
}
|
|
|
|
/// sp|dp to px
|
|
// Google's Material design specs are in 'sp' or 'dp' which are not css units
|
|
// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels' (same as dp, but will be scaled by the user's font size preference)
|
|
// Android gives a 160dpi base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
|
|
// We define a scaling factor in case we need to adjust
|
|
// 'sp' is scale to 1 css-px for a rem-base-value of 16px (default)
|
|
// 'dp' is scale to 1 css-px according to scaling factor
|
|
//
|
|
// sp-to-px converts a 'sp' value to css-pixel value. Units, if specified will be stripped
|
|
// dp-to-px converts a 'dp' value to css-pixel value. Units, if specified will be stripped
|
|
//
|
|
// @param {number} $value - sp or dp value to convert.
|
|
//
|
|
// @return {number} in px.
|
|
//
|
|
@function dp-to-px($value) {
|
|
$value: strip-unit($value) * strip-unit($sg-dp-scale-factor) * 1px;
|
|
@if ($value == 0sp) { $value: 0; } // Turn 0rem into 0
|
|
@return $value;
|
|
}
|
|
@function sp-to-px($value) {
|
|
$value: strip-unit($value) * $sg-sp-value * 16px;
|
|
@if ($value == 0sp) { $value: 0; } // Turn 0sp into 0
|
|
@return $value;
|
|
}
|
|
|
|
/// Utility fonction to easily get any hue from any palette anyware
|
|
/// More easy to remember than variable names
|
|
@function sg-color($color, $hue) {
|
|
@return map-get($color, $hue);
|
|
}
|
|
|
|
/// Utility fonction to easily get font size from typographic scale
|
|
/// More easy to remember than variable names.
|
|
/// @usage : provide type-size from the Material design typographic scale
|
|
/// (caption, body, button, menu, subhead, title, headline, display-1, display-2, display-3, display-4 ; ther's also shortcut aliases : d1, d2, d3, d4)
|
|
/// @return : type size
|
|
@function sg-size($size) {
|
|
@return (map-get($typeSize, $size) * 1px);
|
|
}
|
|
|