_functions.scss — VK Blocks trunk

vk-blocks / lib / bootstrap / scss / _functions.scss

vk-blocks / lib / bootstrap / scss Last commit date

_functions.scss

142 lines

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
35	// Replace `$search` with `$replace` in `$string`
36	// Used on our SVG icon backgrounds for custom forms.
37	//
38	// @author Hugo Giraudel
39	// @param {String} $string - Initial string
40	// @param {String} $search - Substring to replace
41	// @param {String} $replace ('') - New value
42	// @return {String} - Updated string
43	@function str-replace($string, $search, $replace: "") {
44	$index: str-index($string, $search);
45
46	@if $index {
47	@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
48	}
49
50	@return $string;
51	}
52
53	// See https://codepen.io/kevinweber/pen/dXWoRw
54	@function escape-svg($string) {
55	@if str-index($string, "data:image/svg+xml") {
56	@each $char, $encoded in $escaped-characters {
57	// Do not escape the url brackets
58	@if str-index($string, "url(") == 1 {
59	$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
60	} @else {
61	$string: str-replace($string, $char, $encoded);
62	}
63	}
64	}
65
66	@return $string;
67	}
68
69	// Color contrast
70	@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
71	$r: red($color);
72	$g: green($color);
73	$b: blue($color);
74
75	$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
76
77	@if ($yiq >= $yiq-contrasted-threshold) {
78	@return $dark;
79	} @else {
80	@return $light;
81	}
82	}
83
84	// Retrieve color Sass maps
85	@function color($key: "blue") {
86	@return map-get($colors, $key);
87	}
88
89	@function theme-color($key: "primary") {
90	@return map-get($theme-colors, $key);
91	}
92
93	@function gray($key: "100") {
94	@return map-get($grays, $key);
95	}
96
97	// Request a theme color level
98	@function theme-color-level($color-name: "primary", $level: 0) {
99	$color: theme-color($color-name);
100	$color-base: if($level > 0, $black, $white);
101	$level: abs($level);
102
103	@return mix($color-base, $color, $level * $theme-color-interval);
104	}
105
106	// Return valid calc
107	@function add($value1, $value2, $return-calc: true) {
108	@if $value1 == null {
109	@return $value2;
110	}
111
112	@if $value2 == null {
113	@return $value1;
114	}
115
116	@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
117	@return $value1 + $value2;
118	}
119
120	@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
121	}
122
123	@function subtract($value1, $value2, $return-calc: true) {
124	@if $value1 == null and $value2 == null {
125	@return null;
126	}
127
128	@if $value1 == null {
129	@return -$value2;
130	}
131
132	@if $value2 == null {
133	@return $value1;
134	}
135
136	@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
137	@return $value1 - $value2;
138	}
139
140	@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
141	}
142