Нет описания
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

_functions.scss 1.9KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. // Functions
  2. // Remove the unit of a length
  3. @function strip-unit($number) {
  4. @if type-of($number) == "number" and not unitless($number) {
  5. @return divide($number, ($number * 0 + 1));
  6. }
  7. @return $number;
  8. }
  9. // Convert size px to rem
  10. @function px-to-rem($value) {
  11. // Assumes the browser default font size = `16px`
  12. @return (divide(strip-unit($value), 16)) * 1rem;
  13. }
  14. // Convert size rem to px
  15. @function rem-to-px($value) {
  16. // Assumes the browser default font size = `16px`
  17. @return (strip-unit($value) * 16) * 1px;
  18. }
  19. // Colors
  20. // *******************************************************************************
  21. // ? Override shade, tint and shift function with custom background color option i.e $card-bg to make it similar like design
  22. // Shade a color: mix a color with background/white
  23. @function tint-color($color, $weight, $background: null) {
  24. $background: if($background, $background, #fff);
  25. @return mix($background, $color, $weight);
  26. }
  27. // Shade a color: mix a color with background/black
  28. @function shade-color($color, $weight, $background: null) {
  29. $background: if($background, $background, #000);
  30. @return mix($background, $color, $weight);
  31. }
  32. // Shade the color if the weight is positive, else tint it
  33. @function shift-color($color, $weight, $background: null) {
  34. @return if($weight > 0, shade-color($color, $weight, $background), tint-color($color, -$weight));
  35. }
  36. // RGBA to HEX
  37. @function rgba-to-hex($color, $background: #fff) {
  38. @if $color and alpha($color) != 1 {
  39. $percent: alpha($color) * 100%;
  40. $opaque: opacify($color, 1);
  41. @return mix($opaque, $background, $percent);
  42. } @else {
  43. @return $color;
  44. }
  45. }
  46. // Calculating Color Contrast
  47. @function contrast-value($color) {
  48. @if $color == transparent {
  49. @return $body-color;
  50. } @else if alpha($color) != 1 {
  51. $color: rgba-to-hex($color);
  52. }
  53. $r: red($color);
  54. $g: green($color);
  55. $b: blue($color);
  56. @return divide((($r * 299) + ($g * 587) + ($b * 114)), 1000);
  57. }