diff options
author | Allan Wang <me@allanwang.ca> | 2019-02-05 22:13:41 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-02-05 22:13:41 -0500 |
commit | 330bf2857396b15752afadb030c981a1cb2848fe (patch) | |
tree | ce224b4ce241ccc58af32614052b2a407f3e89c0 /app/src/web/assets/css/core/_base.scss | |
parent | c484c2728c1688ed695205a420eba3f2b2ba179d (diff) | |
download | frost-330bf2857396b15752afadb030c981a1cb2848fe.tar.gz frost-330bf2857396b15752afadb030c981a1cb2848fe.tar.bz2 frost-330bf2857396b15752afadb030c981a1cb2848fe.zip |
Enhancement/js (#1344)
* Attempt to add package json
* Add initial typescript components
* Convert remaining files
* Remove some null checks
* Reorganize folders
* Add missing js and tests for file paths
* Delete unused babelrc
* Remove unused packages
Diffstat (limited to 'app/src/web/assets/css/core/_base.scss')
-rw-r--r-- | app/src/web/assets/css/core/_base.scss | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/app/src/web/assets/css/core/_base.scss b/app/src/web/assets/css/core/_base.scss new file mode 100644 index 00000000..472319fe --- /dev/null +++ b/app/src/web/assets/css/core/_base.scss @@ -0,0 +1,107 @@ +@mixin placeholder { + ::-webkit-input-placeholder { + @content; + } + + :-moz-placeholder { + @content; + } + + ::-moz-placeholder { + @content; + } + + :-ms-input-placeholder { + @content; + } +} + +@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(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; +} |