Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 30... Línea 30...
30 
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
 30 
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
31 
    }
 31 
    }
32 
  }
 32 
  }
33 
}
 33 
}
Línea -... Línea 34...
- 
 
 34 
 
- 
 
 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 
}
34 
 
 108 
 
35 
// Replace `$search` with `$replace` in `$string`
 109 
// Replace `$search` with `$replace` in `$string`
36 
// Used on our SVG icon backgrounds for custom forms.
 110 
// Used on our SVG icon backgrounds for custom forms.
37 
//
 111 
//
38 
// @author Hugo Giraudel
 112 
// @author Kitty Giraudel
39 
// @param {String} $string - Initial string
 113 
// @param {String} $string - Initial string
40 
// @param {String} $search - Substring to replace
 114 
// @param {String} $search - Substring to replace
41 
// @param {String} $replace ('') - New value
 115 
// @param {String} $replace ('') - New value
42 
// @return {String} - Updated string
 116 
// @return {String} - Updated string
Línea 68... Línea 142...
68 
 
 142 
 
69 
  @return $string;
 143 
  @return $string;
Línea 70... Línea 144...
70 
}
 144 
}
71 
 
 145 
 
72 
// Color contrast
 - 
 
73 
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
 - 
 
74 
  $r: red($color);
 - 
 
Línea -... Línea 146...
- 
 
 146 
// Color contrast
- 
 
 147 
// See https://github.com/twbs/bootstrap/pull/30168
75 
  $g: green($color);
 148 
 
- 
 
 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;
- 
 
 152 
 
- 
 
 153 
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
76 
  $b: blue($color);
 154 
  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
- 
 
 155 
  $max-ratio: 0;
- 
 
 156 
  $max-ratio-color: null;
77 
 
 157 
 
78 
  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001;
 158 
  @each $color in $foregrounds {
79 
 
 159 
    $contrast-ratio: contrast-ratio($background, $color);
- 
 
 160 
    @if $contrast-ratio > $min-contrast-ratio {
80 
  @if ($yiq >= $yiq-contrasted-threshold) {
 161 
      @return $color;
- 
 
 162 
    } @else if $contrast-ratio > $max-ratio {
81 
    @return $dark;
 163 
      $max-ratio: $contrast-ratio;
- 
 
 164 
      $max-ratio-color: $color;
- 
 
 165 
    }
- 
 
 166 
  }
- 
 
 167 
 
- 
 
 168 
  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
- 
 
 169 
 
- 
 
 170 
  @return $max-ratio-color;
- 
 
 171 
}
- 
 
 172 
 
- 
 
 173 
@function contrast-ratio($background, $foreground: $color-contrast-light) {
- 
 
 174 
  $l1: luminance($background);
82 
  } @else {
 175 
  $l2: luminance(opaque($background, $foreground));
Línea 83... Línea 176...
83 
    @return $light;
 176 
 
- 
 
 177 
  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
- 
 
 178 
}
84 
  }
 179 
 
- 
 
 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)
85 
}
 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));
86 
 
 192 
    $rgb: map-merge($rgb, ($name: $value));
Línea -... Línea 193...
- 
 
 193 
  }
- 
 
 194 
 
87 
// Retrieve color Sass maps
 195 
  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
88 
@function color($key: "blue") {
 196 
}
89 
  @return map-get($colors, $key);
 197 
 
Línea -... Línea 198...
- 
 
 198 
// Return opaque color
- 
 
 199 
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
90 
}
 200 
@function opaque($background, $foreground) {
91 
 
 201 
  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
92 
@function theme-color($key: "primary") {
 202 
}
Línea 93... Línea 203...
93 
  @return map-get($theme-colors, $key);
 203 
 
94 
}
 - 
 
95 
 
 204 
// scss-docs-start color-functions
96 
@function gray($key: "100") {
 205 
// Tint a color: mix a color with white
97 
  @return map-get($grays, $key);
 - 
 
- 
 
 206 
@function tint-color($color, $weight) {
Línea -... Línea 207...
- 
 
 207 
  @return mix(white, $color, $weight);
- 
 
 208 
}
98 
}
 209 
 
99 
 
 210 
// Shade a color: mix a color with black
- 
 
 211 
@function shade-color($color, $weight) {
Línea 100... Línea 212...
100 
// Request a theme color level
 212 
  @return mix(black, $color, $weight);
101 
@function theme-color-level($color-name: "primary", $level: 0) {
 213 
}
102 
  $color: theme-color($color-name);
 214 
 
103 
  $color-base: if($level > 0, $black, $white);
 215 
// Shade the color if the weight is positive, else tint it