Ohm-Management - Projektarbeit B-ME
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.

functions.sass 2.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. @function mergeColorMaps($bulma-colors, $custom-colors)
  2. // we return at least bulma hardcoded colors
  3. $merged-colors: $bulma-colors
  4. // we want a map as input
  5. @if type-of($custom-colors) == 'map'
  6. @each $name, $components in $custom-colors
  7. // color name should be a string and colors pair a list with at least one element
  8. @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
  9. $color-base: null
  10. // the param can either be a single color
  11. // or a list of 2 colors
  12. @if type-of($components) == 'color'
  13. $color-base: $components
  14. @else if type-of($components) == 'list'
  15. $color-base: nth($components, 1)
  16. $color-invert: null
  17. // is an inverted color provided in the list
  18. @if length($components) > 1
  19. $color-invert: nth($components, 2)
  20. // we only want a color as base color
  21. @if type-of($color-base) == 'color'
  22. // if inverted color is not provided or is not a color we compute it
  23. @if type-of($color-invert) != 'color'
  24. $color-invert: findColorInvert($color-base)
  25. // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
  26. $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
  27. @return $merged-colors
  28. @function powerNumber($number, $exp)
  29. $value: 1
  30. @if $exp > 0
  31. @for $i from 1 through $exp
  32. $value: $value * $number
  33. @else if $exp < 0
  34. @for $i from 1 through -$exp
  35. $value: $value / $number
  36. @return $value
  37. @function colorLuminance($color)
  38. $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
  39. @each $name, $value in $color-rgb
  40. $adjusted: 0
  41. $value: $value / 255
  42. @if $value < 0.03928
  43. $value: $value / 12.92
  44. @else
  45. $value: ($value + .055) / 1.055
  46. $value: powerNumber($value, 2)
  47. $color-rgb: map-merge($color-rgb, ($name: $value))
  48. @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
  49. @function findColorInvert($color)
  50. @if (colorLuminance($color) > 0.55)
  51. @return rgba(#000, 0.7)
  52. @else
  53. @return #fff