Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
// Bootstrap functions
2
//
3
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
4
 
5
// Ascending
6
// Used to evaluate Sass maps like our grid breakpoints.
7
@mixin _assert-ascending($map, $map-name) {
8
  $prev-key: null;
9
  $prev-num: null;
10
  @each $key, $num in $map {
11
    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
12
      // Do nothing
13
    } @else if not comparable($prev-num, $num) {
14
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
15
    } @else if $prev-num >= $num {
16
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
17
    }
18
    $prev-key: $key;
19
    $prev-num: $num;
20
  }
21
}
22
 
23
// Starts at zero
24
// Used to ensure the min-width of the lowest breakpoint starts at 0.
25
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
26
  @if length($map) > 0 {
27
    $values: map-values($map);
28
    $first-value: nth($values, 1);
29
    @if $first-value != 0 {
30
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
31
    }
32
  }
33
}
34
 
1441 ariadna 35
// Colors
36
@function to-rgb($value) {
37
  @return red($value), green($value), blue($value);
38
}
39
 
40
// stylelint-disable scss/dollar-variable-pattern
41
@function rgba-css-var($identifier, $target) {
42
  @if $identifier == "body" and $target == "bg" {
43
    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
44
  } @if $identifier == "body" and $target == "text" {
45
    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
46
  } @else {
47
    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
48
  }
49
}
50
 
51
@function map-loop($map, $func, $args...) {
52
  $_map: ();
53
 
54
  @each $key, $value in $map {
55
    // allow to pass the $key and $value of the map as an function argument
56
    $_args: ();
57
    @each $arg in $args {
58
      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
59
    }
60
 
61
    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
62
  }
63
 
64
  @return $_map;
65
}
66
// stylelint-enable scss/dollar-variable-pattern
67
 
68
@function varify($list) {
69
  $result: null;
70
  @each $entry in $list {
71
    $result: append($result, var(--#{$prefix}#{$entry}), space);
72
  }
73
  @return $result;
74
}
75
 
76
// Internal Bootstrap function to turn maps into its negative variant.
77
// It prefixes the keys with `n` and makes the value negative.
78
@function negativify-map($map) {
79
  $result: ();
80
  @each $key, $value in $map {
81
    @if $key != 0 {
82
      $result: map-merge($result, ("n" + $key: (-$value)));
83
    }
84
  }
85
  @return $result;
86
}
87
 
88
// Get multiple keys from a sass map
89
@function map-get-multiple($map, $values) {
90
  $result: ();
91
  @each $key, $value in $map {
92
    @if (index($values, $key) != null) {
93
      $result: map-merge($result, ($key: $value));
94
    }
95
  }
96
  @return $result;
97
}
98
 
99
// Merge multiple maps
100
@function map-merge-multiple($maps...) {
101
  $merged-maps: ();
102
 
103
  @each $map in $maps {
104
    $merged-maps: map-merge($merged-maps, $map);
105
  }
106
  @return $merged-maps;
107
}
108
 
1 efrain 109
// Replace `$search` with `$replace` in `$string`
110
// Used on our SVG icon backgrounds for custom forms.
111
//
1441 ariadna 112
// @author Kitty Giraudel
1 efrain 113
// @param {String} $string - Initial string
114
// @param {String} $search - Substring to replace
115
// @param {String} $replace ('') - New value
116
// @return {String} - Updated string
117
@function str-replace($string, $search, $replace: "") {
118
  $index: str-index($string, $search);
119
 
120
  @if $index {
121
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
122
  }
123
 
124
  @return $string;
125
}
126
 
127
// See https://codepen.io/kevinweber/pen/dXWoRw
128
//
129
// Requires the use of quotes around data URIs.
130
 
131
@function escape-svg($string) {
132
  @if str-index($string, "data:image/svg+xml") {
133
    @each $char, $encoded in $escaped-characters {
134
      // Do not escape the url brackets
135
      @if str-index($string, "url(") == 1 {
136
        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
137
      } @else {
138
        $string: str-replace($string, $char, $encoded);
139
      }
140
    }
141
  }
142
 
143
  @return $string;
144
}
145
 
146
// Color contrast
1441 ariadna 147
// See https://github.com/twbs/bootstrap/pull/30168
1 efrain 148
 
1441 ariadna 149
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
150
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
151
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
1 efrain 152
 
1441 ariadna 153
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
154
  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
155
  $max-ratio: 0;
156
  $max-ratio-color: null;
157
 
158
  @each $color in $foregrounds {
159
    $contrast-ratio: contrast-ratio($background, $color);
160
    @if $contrast-ratio > $min-contrast-ratio {
161
      @return $color;
162
    } @else if $contrast-ratio > $max-ratio {
163
      $max-ratio: $contrast-ratio;
164
      $max-ratio-color: $color;
165
    }
1 efrain 166
  }
1441 ariadna 167
 
168
  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
169
 
170
  @return $max-ratio-color;
1 efrain 171
}
172
 
1441 ariadna 173
@function contrast-ratio($background, $foreground: $color-contrast-light) {
174
  $l1: luminance($background);
175
  $l2: luminance(opaque($background, $foreground));
176
 
177
  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
1 efrain 178
}
179
 
1441 ariadna 180
// Return WCAG2.1 relative luminance
181
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
182
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
183
@function luminance($color) {
184
  $rgb: (
185
    "r": red($color),
186
    "g": green($color),
187
    "b": blue($color)
188
  );
189
 
190
  @each $name, $value in $rgb {
191
    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
192
    $rgb: map-merge($rgb, ($name: $value));
193
  }
194
 
195
  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
1 efrain 196
}
197
 
1441 ariadna 198
// Return opaque color
199
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
200
@function opaque($background, $foreground) {
201
  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
1 efrain 202
}
203
 
1441 ariadna 204
// scss-docs-start color-functions
205
// Tint a color: mix a color with white
206
@function tint-color($color, $weight) {
207
  @return mix(white, $color, $weight);
208
}
1 efrain 209
 
1441 ariadna 210
// Shade a color: mix a color with black
211
@function shade-color($color, $weight) {
212
  @return mix(black, $color, $weight);
1 efrain 213
}
214
 
1441 ariadna 215
// Shade the color if the weight is positive, else tint it
216
@function shift-color($color, $weight) {
217
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
218
}
219
// scss-docs-end color-functions
220
 
1 efrain 221
// Return valid calc
222
@function add($value1, $value2, $return-calc: true) {
223
  @if $value1 == null {
224
    @return $value2;
225
  }
226
 
227
  @if $value2 == null {
228
    @return $value1;
229
  }
230
 
231
  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
232
    @return $value1 + $value2;
233
  }
234
 
235
  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
236
}
237
 
238
@function subtract($value1, $value2, $return-calc: true) {
239
  @if $value1 == null and $value2 == null {
240
    @return null;
241
  }
242
 
243
  @if $value1 == null {
244
    @return -$value2;
245
  }
246
 
247
  @if $value2 == null {
248
    @return $value1;
249
  }
250
 
251
  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
252
    @return $value1 - $value2;
253
  }
254
 
255
  @if type-of($value2) != number {
256
    $value2: unquote("(") + $value2 + unquote(")");
257
  }
258
 
259
  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
260
}
261
 
262
@function divide($dividend, $divisor, $precision: 10) {
263
  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
264
  $dividend: abs($dividend);
265
  $divisor: abs($divisor);
266
  @if $dividend == 0 {
267
    @return 0;
268
  }
269
  @if $divisor == 0 {
270
    @error "Cannot divide by 0";
271
  }
272
  $remainder: $dividend;
273
  $result: 0;
274
  $factor: 10;
275
  @while ($remainder > 0 and $precision >= 0) {
276
    $quotient: 0;
277
    @while ($remainder >= $divisor) {
278
      $remainder: $remainder - $divisor;
279
      $quotient: $quotient + 1;
280
    }
281
    $result: $result * 10 + $quotient;
282
    $factor: $factor * .1;
283
    $remainder: $remainder * 10;
284
    $precision: $precision - 1;
285
    @if ($precision < 0 and $remainder >= $divisor * 5) {
286
      $result: $result + 1;
287
    }
288
  }
289
  $result: $result * $factor * $sign;
290
  $dividend-unit: unit($dividend);
291
  $divisor-unit: unit($divisor);
292
  $unit-map: (
293
    "px": 1px,
294
    "rem": 1rem,
295
    "em": 1em,
296
    "%": 1%
297
  );
298
  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
299
    $result: $result * map-get($unit-map, $dividend-unit);
300
  }
301
  @return $result;
302
}