functions.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  3. *
  4. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  5. *
  6. * @license GNU AGPL version 3 or any later version
  7. *
  8. * This program is free software: you can redistribute it and/or modify
  9. * it under the terms of the GNU Affero General Public License as
  10. * published by the Free Software Foundation, either version 3 of the
  11. * License, or (at your option) any later version.
  12. *
  13. * This program is distributed in the hope that it will be useful,
  14. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. * GNU Affero General Public License for more details.
  17. *
  18. * You should have received a copy of the GNU Affero General Public License
  19. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  20. *
  21. */
  22. /**
  23. * Removes the "#" from a color.
  24. *
  25. * @param string $color The color
  26. * @return string The color without #
  27. */
  28. @function remove-hash-from-color($color) {
  29. $index: str-index(inspect($color), '#');
  30. @if $index {
  31. $color: str-slice(inspect($color), 2);
  32. }
  33. @return $color;
  34. }
  35. /**
  36. * Calculates the URL to the svg under the SVG API.
  37. *
  38. * @param string $icon the icon filename
  39. * @param string $dir the icon folder within /core/img if $core or app name
  40. * @param string $color the desired color in hexadecimal
  41. * @param int [$version] the version of the file
  42. * @param bool [$core] search icon in core
  43. * @return string The URL to the svg.
  44. */
  45. @function icon-color-path($icon, $dir, $color, $version: 1, $core: false) {
  46. $color: remove-hash-from-color($color);
  47. @if $core {
  48. @return '#{$webroot}/svg/core/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}';
  49. } @else {
  50. @return '#{$webroot}/svg/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}';
  51. }
  52. }
  53. /**
  54. * SVG COLOR API
  55. *
  56. * @param string $icon the icon filename
  57. * @param string $dir the icon folder within /core/img if $core or app name
  58. * @param string $color the desired color in hexadecimal
  59. * @param int $version the version of the file
  60. * @param bool [$core] search icon in core
  61. *
  62. * @returns A background image with the url to the set to the requested icon.
  63. */
  64. @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
  65. $color: remove-hash-from-color($color);
  66. /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
  67. $varName: "--icon-#{$dir}-#{$icon}-#{$color}";
  68. @if $core {
  69. $varName: "--icon-#{$icon}-#{$color}";
  70. }
  71. #{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));
  72. background-image: var(#{$varName});
  73. }
  74. /**
  75. * Create black and white icons
  76. * This will add a default black version of and an additional white version when .icon-white is applied
  77. */
  78. @mixin icon-black-white($icon, $dir, $version, $core: false) {
  79. .icon-#{$icon} {
  80. @include icon-color($icon, $dir, $color-black, $version, $core);
  81. }
  82. .icon-#{$icon}-white,
  83. .icon-#{$icon}.icon-white {
  84. @include icon-color($icon, $dir, $color-white, $version, $core);
  85. }
  86. }
  87. @mixin position($value) {
  88. @if $value == 'sticky' {
  89. position: -webkit-sticky; // Safari support
  90. position: sticky;
  91. } @else {
  92. position: $value;
  93. }
  94. }