_functions.scss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. // This is the default html and body font-size for the base rem value.
  5. $rem-base: 16px !default;
  6. // IMPORT ONCE
  7. // We use this to prevent styles from being loaded multiple times for components that rely on other components.
  8. $modules: () !default;
  9. @mixin exports($name) {
  10. // Import from global scope
  11. $modules: $modules !global;
  12. // Check if a module is already on the list
  13. $module_index: index($modules, $name);
  14. @if (($module_index == null) or ($module_index == false)) {
  15. $modules: append($modules, $name) !global;
  16. @content;
  17. }
  18. }
  19. //
  20. // @functions
  21. //
  22. // RANGES
  23. // We use these functions to define ranges for various things, like media queries.
  24. @function lower-bound($range){
  25. @if length($range) <= 0 {
  26. @return 0;
  27. }
  28. @return nth($range,1);
  29. }
  30. @function upper-bound($range) {
  31. @if length($range) < 2 {
  32. @return 999999999999;
  33. }
  34. @return nth($range, 2);
  35. }
  36. // STRIP UNIT
  37. // It strips the unit of measure and returns it
  38. @function strip-unit($num) {
  39. @return $num / ($num * 0 + 1);
  40. }
  41. // TEXT INPUT TYPES
  42. @function text-inputs( $types: all, $selector: input ) {
  43. $return: ();
  44. $all-text-input-types:
  45. text
  46. password
  47. date
  48. datetime
  49. datetime-local
  50. month
  51. week
  52. email
  53. number
  54. search
  55. tel
  56. time
  57. url
  58. color
  59. textarea;
  60. @if $types == all { $types: $all-text-input-types; }
  61. @each $type in $types {
  62. @if $type == textarea {
  63. @if $selector == input {
  64. $return: append($return, unquote('#{$type}'), comma)
  65. } @else {
  66. $return: append($return, unquote('#{$type}#{$selector}'), comma)
  67. }
  68. } @else {
  69. $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
  70. }
  71. }
  72. @return $return;
  73. }
  74. // CONVERT TO REM
  75. @function convert-to-rem($value, $base-value: $rem-base) {
  76. $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  77. @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  78. @return $value;
  79. }
  80. @function data($attr) {
  81. @if $namespace {
  82. @return '[data-' + $namespace + '-' + $attr + ']';
  83. }
  84. @return '[data-' + $attr + ']';
  85. }
  86. // REM CALC
  87. // New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
  88. // Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
  89. //
  90. // rem-calc(10 20 30px 40);
  91. //
  92. // Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
  93. //
  94. // rem-calc((10, 20, 30, 40px));
  95. //
  96. // Optionally call with a different base (eg: 8px) to calculate rem.
  97. //
  98. // rem-calc(16px 32px 48px, 8px);
  99. //
  100. // If you require to comma separate your list
  101. //
  102. // rem-calc((16px, 32px, 48), 8px);
  103. @function rem-calc($values, $base-value: $rem-base) {
  104. $max: length($values);
  105. @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
  106. $remValues: ();
  107. @for $i from 1 through $max {
  108. $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  109. }
  110. @return $remValues;
  111. }
  112. // OLD EM CALC
  113. // Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
  114. @function emCalc($values){
  115. @return rem-calc($values);
  116. }
  117. // OLD EM CALC
  118. // Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
  119. @function em-calc($values){
  120. @return rem-calc($values);
  121. }