1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
@use 'sass:math';
@mixin placeholder {
::placeholder {
@content;
}
::-webkit-input-placeholder {
@content;
}
:-moz-placeholder {
@content;
}
::-moz-placeholder {
@content;
}
:-ms-input-placeholder {
@content;
}
::-ms-input-placeholder {
@content;
}
}
@mixin fill-available {
width: 100%;
max-width: -webkit-fill-available;
max-width: -moz-available;
max-width: fill-available;
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
//@-ms-keyframes #{$name} {
// @content;
//}
@keyframes #{$name} {
@content;
}
}
// Helper function to replace characters in a string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@return if(
$index,
str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace),
$string
);
}
// https://css-tricks.com/probably-dont-base64-svg/
// SVG optimization thanks to https://codepen.io/jakob-e/pen/doMoML
// Function to create an optimized svg url
// Version: 1.0.6
@function svg-url($svg) {
//
// Add missing namespace
//
@if not str-index($svg, xmlns) {
$svg: str-replace($svg, "<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
}
//
// Chunk up string in order to avoid
// "stack level too deep" error
//
$encoded: "";
$slice: 2000;
$index: 0;
$loops: ceil(math.div(str-length($svg), $slice));
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
//
// Encode
//
//$chunk: str-replace($chunk, '"', """);
$chunk: str-replace($chunk, "%", "%25");
$chunk: str-replace($chunk, "#", "%23");
$chunk: str-replace($chunk, "{", "%7B");
$chunk: str-replace($chunk, "}", "%7D");
$chunk: str-replace($chunk, "<", "%3C");
$chunk: str-replace($chunk, ">", "%3E");
//
// The maybe list
//
// Keep size and compile time down
// ... only add on documented fail
//
// $chunk: str-replace($chunk, '&', '%26');
// $chunk: str-replace($chunk, '|', '%7C');
// $chunk: str-replace($chunk, '[', '%5B');
// $chunk: str-replace($chunk, ']', '%5D');
// $chunk: str-replace($chunk, '^', '%5E');
// $chunk: str-replace($chunk, '`', '%60');
// $chunk: str-replace($chunk, ';', '%3B');
// $chunk: str-replace($chunk, '?', '%3F');
// $chunk: str-replace($chunk, ':', '%3A');
// $chunk: str-replace($chunk, '@', '%40');
// $chunk: str-replace($chunk, '=', '%3D');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml,#{$encoded}");
}
// Background svg mixin
@mixin background-svg($svg, $extra: "no-repeat") {
background: svg-url($svg) unquote($extra) !important;
}
|
