diff options
author | Dylan Bolger <dylanbolger@Dylans-MacBook-Air.local> | 2018-03-18 00:13:48 -0500 |
---|---|---|
committer | Dylan Bolger <dylanbolger@Dylans-MacBook-Air.local> | 2018-03-18 00:13:48 -0500 |
commit | f3195ea547bae0c0a31aef22119c0d2af50ec760 (patch) | |
tree | dc5cf29d80f4f09460b889acabdefce7d432c112 /assets/sass/libs/_mixins.scss | |
parent | fdc4d84659a602447a77834b64595d9e9450a6c4 (diff) | |
download | personal-website-f3195ea547bae0c0a31aef22119c0d2af50ec760.tar.xz personal-website-f3195ea547bae0c0a31aef22119c0d2af50ec760.zip |
c
Diffstat (limited to 'assets/sass/libs/_mixins.scss')
-rwxr-xr-x | assets/sass/libs/_mixins.scss | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/assets/sass/libs/_mixins.scss b/assets/sass/libs/_mixins.scss new file mode 100755 index 0000000..204ba05 --- /dev/null +++ b/assets/sass/libs/_mixins.scss @@ -0,0 +1,56 @@ +/// Makes an element's :before pseudoelement a FontAwesome icon. +/// @param {string} $content Optional content value to use. +/// @param {string} $where Optional pseudoelement to target (before or after). +@mixin icon($content: false, $where: before) { + + text-decoration: none; + + &:#{$where} { + + @if $content { + content: $content; + } + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + + } + +} + +/// Applies padding to an element, taking the current element-margin value into account. +/// @param {mixed} $tb Top/bottom padding. +/// @param {mixed} $lr Left/right padding. +/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) +/// @param {bool} $important If true, adds !important. +@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { + + @if $important { + $important: '!important'; + } + + padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; + +} + +/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). +/// @param {string} $svg SVG data URL. +/// @return {string} Encoded SVG data URL. +@function svg-url($svg) { + + $svg: str-replace($svg, '"', '\''); + $svg: str-replace($svg, '<', '%3C'); + $svg: str-replace($svg, '>', '%3E'); + $svg: str-replace($svg, '&', '%26'); + $svg: str-replace($svg, '#', '%23'); + $svg: str-replace($svg, '{', '%7B'); + $svg: str-replace($svg, '}', '%7D'); + $svg: str-replace($svg, ';', '%3B'); + + @return url("data:image/svg+xml;charset=utf8,#{$svg}"); + +}
\ No newline at end of file |