{: versionI"3.4.25 (Selective Steve):EF:shaI"-aff1205471d0c920fde4d6ff920fc30b69f911f9;F: contents"ÀJo:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"`/*------------------------------------*\ $MIXINS \*------------------------------------*/:ET: @type: normal;[:@filename0: @options{: @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i.: @fileI"s/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/helpers/_mixins.scss; T:@importero:Sass::Rails::SassImporter: @rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss; F:@real_rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss; F:@same_name_warningso:Set: @hash{o; ;[I"3/** * Target devices based on pixel ratio */; T; ; ;[; 0; @ ;i ;o; ;o;;i ;i;o;;i ;i ;@;@o:Sass::Tree::MixinDefNode: @nameI"device-pixel-ratio; T: @args[[o:!Sass::Script::Tree::Variable ;I" ratio; T:@underscored_nameI" ratio; T:@css_variable_warning0;i ;o; ;o;;i ;i ;o;;i ;i&;@;@; @; @ o: Sass::Script::Tree::Literal ;o: Sass::Script::Value::Number ;i; @ :@numerator_units[:@denominator_units[:@originalI"2; F;"0;i ;o; ;o;;i ;i(;o;;i ;i);@;@; @: @splat0;[o:Sass::Tree::MediaNode: @query[@I" only; TI" ; TI" screen; TI" and ; TI"(; To;# ;o: Sass::Script::Value::String ;I"#-webkit-min-device-pixel-ratio; T; @ ; :identifier:"@deprecated_interp_equivalent0;"0;i;o; ;o;;i;i ;o;;i;i>;@;@; @I": ; To; ;I" ratio; T;!I" ratio; T;"0;i;o; ;o;;i;i@;o;;i;iF;@;@; @; @ I"); TI", ; TI" only; TI" ; TI" screen; TI" and ; TI"(; To;# ;o;+ ;I" min--moz-device-pixel-ratio; T; @ ; ;,;-0;"0;i;o; ;o;;i;i;o;;i;i4;@;@; @I": ; To; ;I" ratio; T;!I" ratio; T;"0;i;o; ;o;;i;i6;o;;i;i<;@;@; @; @ I"); T@DI" only; TI" ; TI" screen; TI" and ; TI"(; To;# ;o;+ ;I"-o-min-device-pixel-ratio; T; @ ; ;,;-0;"0;i;o; ;o;;i;i;o;;i;i2;@;@; @I": ; To:&Sass::Script::Tree::Interpolation: @before0: @mido:"Sass::Script::Tree::Operation :@operand1o; ;I" ratio; T;!I" ratio; T;"0;i;o; ;o;;i;i7;o;;i;i=;@;@; @; @ :@operand2o;# ;o;$ ;i; @ ;%[;&@);'0;"0;i;o; ;o;;i;i>;o;;i;i@;@;@; @:@operator: times;"0;i;o; ;@j;o;;i;i@;@;@; @; @ : @aftero;.;/0;0o;# ;o;+ ;I"/; T; @ ; ;,;-0;"0;i;o; ;o;;i;iB;o;;i;iC;@;@; @;6o;# ;o;$ ;i; @ ;%[;&@);'I"10; F;"0;i;o; ;o;;i;iC;o;;i;iE;@;@; @:@whitespace_beforeF:@whitespace_after0:@originally_textT:@warn_for_colorF:@deprecation: none;"0;i;o; ;@y;o;;i;iE;@;@; @; @ ;7i\;80;9F;:F;;:potential;"0;i;o; ;o;;i;i4;o;;i;iE;@;@; @; @ I"); T@DI" only; TI" ; TI" screen; TI" and ; TI"(; To;# ;o;+ ;I"min-device-pixel-ratio; T; @ ; ;,;-0;"0;i;o; ;o;;i;i;o;;i;i/;@;@; @I": ; To; ;I" ratio; T;!I" ratio; T;"0;i;o; ;o;;i;i1;o;;i;i7;@;@; @; @ I"); T@DI" only; TI" ; TI" screen; TI" and ; TI"(; To;# ;o;+ ;I"min-resolution; T; @ ; ;,;-0;"0;i;o; ;o;;i;i;o;;i;i';@;@; @I": ; To;.;/0;0o;1 ;2o; ;I" ratio; T;!I" ratio; T;"0;i;o; ;o;;i;i,;o;;i;i2;@;@; @; @ ;3o;# ;o;$ ;ie; @ ;%[;&@);'0;"0;i;o; ;o;;i;i3;o;;i;i5;@;@; @;4;5;"0;i;o; ;@¨;o;;i;i5;@;@; @; @ ;6o;# ;o;+ ;I"dpi; T; @ ; ;,;-0;"0;i;o; ;o;;i;i7;o;;i;i:;@;@; @;7iÇ;80;9F;:F;;;=;"0;i;o; ;o;;i;i);o;;i;i:;@;@; @; @ I"); T@DI" only; TI" ; TI" screen; TI" and ; TI"(; To;# ;o;+ ;I"min-resolution; T; @ ; ;,;-0;"0;i;o; ;o;;i;i;o;;i;i';@;@; @I": ; To;.;/0;0o; ;I" ratio; T;!I" ratio; T;"0;i;o; ;o;;i;i+;o;;i;i1;@;@; @; @ ;6o;# ;o;+ ;I" dppx; T; @ ; ;,;-0;"0;i;o; ;o;;i;i2;o;;i;i6;@;@; @;7iþ;80;9F;:F;;;=;"0;i;o; ;o;;i;i);o;;i;i6;@;@; @; @ I"); T;I"; T: @tabsi;[o:Sass::Tree::ContentNode ;[; 0; @ ;i;o; ;o;;i;i ;o;;i;i;@;@; 0; @ ;i;o; ;o;;i;i;o;;i;i8;@;@:@has_childrenT; 0; @ ;i ;o; ;o;;i ;i;o;;i ;i+;@;@;@To; ;[I"J/** * Link states * * @include states { * color: blue; * } */; T; ; ;[; 0; @ ;i;o; ;o;;i;i;o;;i;i ;@;@o;;I" states; T;[;(0;[o:Sass::Tree::RuleNode: @rule[I"#&:hover, &:active, &:focus; T:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence;E[o:#Sass::Selector::SimpleSequence ;E[o:Sass::Selector::Parent: @suffix0;i!; 0o:Sass::Selector::Pseudo :@syntactic_type: class;I" hover; T: @arg0:@selector0;i!; 0: @subject0: @sourceso;;{;o; ;o;;i;i;o;;i;i ;0;0;i!; 0;i!o;F;E[I" ; To;G ;E[o;H;I0;i!; 0o;J ;K;L;I" active; T;M0;N0;i!; 0;O0;Po;;{;o; ;o;;i;i;o;;i;i;0;0;i!; 0;i!o;F;E[I" ; To;G ;E[o;H;I0;i!; 0o;J ;K;L;I" focus; T;M0;N0;i!; 0;O0;Po;;{;o; ;o;;i;i;o;;i;i;0;0;i!; 0;i!;i!; 0:@selector_source_rangeo; ;o;;i!;i;o;;i#;i;@;@;>i;[o;? ;[; 0; @ ;i$;o; ;o;;i$;i ;o;;i$;i;@;@; 0; @ ;i!;o; ;@;o;;i#;i;@;@;@T; 0; @ ;i ;o; ;o;;i ;i;o;;i ;i;@;@;@To; ;[I"Z/** * Style all headings at once * * @include headings { * color: red; * } */; T; ; ;[; 0; @ ;i);o; ;o;;i);i;o;;i/;i ;@;@o;;I" headings; T;[;(0;[o;A;B[I"%h1, h2, h3, h4, h5, h6; T;Co;D;E[ o;F;E[o;G ;E[o:Sass::Selector::Element ;I"h1; T:@namespace0;i1; 0;O0;Po;;{;o; ;o;;i;i;o;;i;i;0;0;i1; 0;i1o;F;E[I" ; To;G ;E[o;R ;I"h2; T;S0;i1; 0;O0;Po;;{;o; ;o;;i;i;o;;i;i ;0;0;i1; 0;i1o;F;E[I" ; To;G ;E[o;R ;I"h3; T;S0;i1; 0;O0;Po;;{;o; ;o;;i;i;o;;i;i ;0;0;i1; 0;i1o;F;E[I" ; To;G ;E[o;R ;I"h4; T;S0;i1; 0;O0;Po;;{;o; ;o;;i ;i;o;;i ;i ;0;0;i1; 0;i1o;F;E[I" ; To;G ;E[o;R ;I"h5; T;S0;i1; 0;O0;Po;;{;o; ;o;;i ;i;o;;i ;i ;0;0;i1; 0;i1o;F;E[I" ; To;G ;E[o;R ;I"h6; T;S0;i1; 0;O0;Po;;{;o; ;o;;i ;i;o;;i ;i ;0;0;i1; 0;i1;i1; 0;Qo; ;o;;i1;i;o;;i6;i ;@;@;>i;[o;? ;[; 0; @ ;i7;o; ;o;;i7;i ;o;;i7;i;@;@; 0; @ ;i1;o; ;@‚;o;;i6;i ;@;@;@T; 0; @ ;i0;o; ;o;;i0;i;o;;i0;i;@;@;@To; ;[I"p/** * Vertically align an element * inside its container * * .thing { @include vertically-align; } */; T; ; ;[; 0; @ ;i<;o; ;o;;i<;i;o;;iA;i ;@;@o;;I"vertically-align; T;[;(0;[o:Sass::Tree::PropNode;[I" position; T;o;#;o;+ ;I" relative; T; @ ; ;,;-0;iC;o; ;o;;iC;i;o;;iC;i;@;@;>i:@prop_syntax:new;[; 0; @ ;iC;o; ;o;;iC;i;o;;iC;i;@;@:@name_source_rangeo; ;@¥;o;;iC;i;@;@:@value_source_rangeo; ;o;;iC;i;@¦;@;@o;T;[I"top; T;o;#;o;+ ;I"50%; T; @ ; ;,;-0;iD;o; ;o;;iD;i ;o;;iD;i;@;@;>i;U;V;[; 0; @ ;iD;o; ;o;;iD;i;o;;iD;i;@;@;Wo; ;@¶;o;;iD;i ;@;@;Xo; ;o;;iD;i ;@·;@;@o;T;[I"transform; T;o: Sass::Script::Tree::Funcall;I"translateY; T;[o:'Sass::Script::Tree::UnaryOperation : @operando;# ;o;$ ;i7; @ ;%[I"%; T;&[;'I"50%; T;"0;iE;o; ;o;;iE;i;o;;iE;i";@;@; @;4: minus;"0;iE;o; ;o;;iE;i;o;;iE;i";@;@; @; @ :@keywordso:Sass::Util::NormalizedMap:@key_strings{: @map{;(0:@kwarg_splat0;"0;iE;o; ;o;;iE;i;o;;iE;i#;@;@; @; @ ;>i;U;V;[; 0; @ ;iE;o; ;o;;iE;i;o;;iE;i#;@;@;Wo; ;@×;o;;iE;i;@;@;Xo; ;o;;iE;i;@Ø;@;@; 0; @ ;iB;o; ;o;;iB;i;o;;iB;i;@;@;@To; ;[I"t/** * Horizontally align an element * inside its container * * .thing { @include horizontally-align; } */; T; ; ;[; 0; @ ;iI;o; ;o;;iI;i;o;;iN;i ;@;@o;;I"horizontally-align; T;[;(0;[o;T;[I" position; T;o;#;o;+ ;I" relative; T; @ ; ;,;-0;iP;o; ;o;;iP;i;o;;iP;i;@;@;>i;U;V;[; 0; @ ;iP;o; ;o;;iP;i;o;;iP;i;@;@;Wo; ;@ö;o;;iP;i;@;@;Xo; ;o;;iP;i;@÷;@;@o;T;[I" left; T;o;#;o;+ ;I"50%; T; @ ; ;,;-0;iQ;o; ;o;;iQ;i;o;;iQ;i;@;@;>i;U;V;[; 0; @ ;iQ;o; ;o;;iQ;i;o;;iQ;i;@;@;Wo; ;@;o;;iQ;i ;@;@;Xo; ;o;;iQ;i;@;@;@o;T;[I"transform; T;o;Y;I"translateX; T;[o;Z ;[o;# ;o;$ ;i7; @ ;%[I"%; T;&[;'I"50%; T;"0;iR;o; ;o;;iR;i;o;;iR;i";@;@; @;4;\;"0;iR;o; ;o;;iR;i;o;;iR;i";@;@; @; @ ;]o;^;_{;`{;(0;a0;"0;iR;o; ;o;;iR;i;o;;iR;i#;@;@; @; @ ;>i;U;V;[; 0; @ ;iR;o; ;o;;iR;i;o;;iR;i#;@;@;Wo; ;@(;o;;iR;i;@;@;Xo; ;o;;iR;i;@);@;@; 0; @ ;iO;o; ;o;;iO;i;o;;iO;i ;@;@;@To; ;[I"n/** * Centrally align an element * inside its container * * .thing { @include centrally-align; } */; T; ; ;[; 0; @ ;iV;o; ;o;;iV;i;o;;i[;i ;@;@o;;I"centrally-align; T;[;(0;[ o;T;[I" position; T;o;#;o;+ ;I" relative; T; @ ; ;,;-0;i];o; ;o;;i];i;o;;i];i;@;@;>i;U;V;[; 0; @ ;i];o; ;o;;i];i;o;;i];i;@;@;Wo; ;@G;o;;i];i;@;@;Xo; ;o;;i];i;@H;@;@o;T;[I" left; T;o;#;o;+ ;I"50%; T; @ ; ;,;-0;i^;o; ;o;;i^;i;o;;i^;i;@;@;>i;U;V;[; 0; @ ;i^;o; ;o;;i^;i;o;;i^;i;@;@;Wo; ;@X;o;;i^;i ;@;@;Xo; ;o;;i^;i;@Y;@;@o;T;[I"top; T;o;#;o;+ ;I"50%; T; @ ; ;,;-0;i_;o; ;o;;i_;i ;o;;i_;i;@;@;>i;U;V;[; 0; @ ;i_;o; ;o;;i_;i;o;;i_;i;@;@;Wo; ;@i;o;;i_;i ;@;@;Xo; ;o;;i_;i ;@j;@;@o;T;[I"transform; T;o;Y;I"translate; T;[o;Z ;[o;# ;o;$ ;i7; @ ;%[I"%; T;&[;'I"50%; T;"0;i`;o; ;o;;i`;i;o;;i`;i!;@;@; @;4;\;"0;i`;o; ;o;;i`;i;o;;i`;i!;@;@; @; @ o;# ;o;$ ;iÉ; @ ;%[I"%; T;&[;'I" -50%; T;"0;i`;o; ;o;;i`;i#;o;;i`;i';@;@; @;]o;^;_{;`{;(0;a0;"0;i`;o; ;o;;i`;i;o;;i`;i(;@;@; @; @ ;>i;U;V;[; 0; @ ;i`;o; ;o;;i`;i;o;;i`;i(;@;@;Wo; ;@“;o;;i`;i;@;@;Xo; ;o;;i`;i;@”;@;@; 0; @ ;i\;o; ;o;;i\;i;o;;i\;i;@;@;@To; ;[I"g/** * SVG background images with fallback * * .thing { @include svg-background(icon-red); } */; T; ; ;[; 0; @ ;id;o; ;o;;id;i;o;;ih;i ;@;@o;;I"svg-background; T;[[o; ;I" image; T;!I" image; T;"0;ii;o; ;o;;ii;i;o;;ii;i";@;@; @; @ 0;(0;[o:Sass::Tree::VariableNode;I"svg-image; T: @expro;1 ;2o; ;I" image; T;!I" image; T;"0;ij;o; ;o;;ij;i;o;;ij;i;@;@; @; @ ;3o;# ;o;+ ;I" .svg; T; @ ; : string;-0;"0;ij;o; ;o;;ij;i;o;;ij;i#;@;@; @;4: plus;"0;ij;o; ;@µ;o;;ij;i#;@;@; @; @ : @guarded0: @global0;[; 0; @ ;ij;o; ;o;;ij;i ;o;;ij;i#;@;@o;T;[I"background-image; T;o;Y;I" file-url; T;[o; ;I"svg-image; T;!I"svg_image; T;"0;ik;o; ;o;;ik;i#;o;;ik;i-;@;@; @; @ ;]o;^;_{;`{;(0;a0;"0;ik;o; ;o;;ik;i;o;;ik;i.;@;@; @; @ ;>i;U;V;[; 0; @ ;ik;o; ;o;;ik;i;o;;ik;i.;@;@;Wo; ;@×;o;;ik;i;@;@;Xo; ;o;;ik;i;@Ø;@;@; 0; @ ;ii;o; ;o;;ii;i;o;;ii;i$;@;@;@To; ;[I"/** * Set the position and top, right, bottom, left values * * .thing { @include position(relative, 0, 1px, 10px, 0); } */; T; ; ;[; 0; @ ;io;o; ;o;;io;i;o;;is;i ;@;@o;;I" position; T;[ [o; ;I" position; T;!I" position; T;"0;it;o; ;o;;it;i;o;;it;i;@;@; @; @ 0[o; ;I"top; T;!I"top; T;"0;it;o; ;o;;it;i!;o;;it;i%;@;@; @; @ 0[o; ;I" right; T;!I" right; T;"0;it;o; ;o;;it;i';o;;it;i-;@;@; @; @ 0[o; ;I" bottom; T;!I" bottom; T;"0;it;o; ;o;;it;i/;o;;it;i6;@;@; @; @ 0[o; ;I" left; T;!I" left; T;"0;it;o; ;o;;it;i8;o;;it;i=;@;@; @; @ 0;(0;[ o;T;[I" position; T;o; ;I" position; T;!I" position; T;"0;iu;o; ;o;;iu;i;o;;iu;i;@;@; @; @ ;>i;U;V;[; 0; @ ;iu;o; ;o;;iu;i;o;;iu;i;@;@;Wo; ;@;o;;iu;i;@;@;Xo; ;o;;iu;i;@;@;@u:Sass::Tree::IfNode÷[o:!Sass::Script::Tree::Variable : @nameI"top:ET:@underscored_nameI"top;T:@css_variable_warning0: @lineiv:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; iv: @offseti : @end_poso;; iv;i: @fileI"s/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/helpers/_mixins.scss;T:@importero:Sass::Rails::SassImporter: @rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@real_rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@same_name_warningso:Set: @hash{:@filename@ : @options{0[o:Sass::Tree::PropNode;[I"top;T: @valueo; ;I"top;T;I"top;T; 0; iv; o; ; o;; iv;i;o;; iv;i;@ ;@ ;@ ;@: @tabsi:@prop_syntax:new:@children[;0;@; iv; o; ; o;; iv;i;o;; iv;i;@ ;@ :@name_source_rangeo; ; @;o;; iv;i;@ ;@ :@value_source_rangeo; ; o;; iv;i;@ ;@ ;@ u;h[o:!Sass::Script::Tree::Variable : @nameI" right:ET:@underscored_nameI" right;T:@css_variable_warning0: @lineiw:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; iw: @offseti : @end_poso;; iw;i: @fileI"s/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/helpers/_mixins.scss;T:@importero:Sass::Rails::SassImporter: @rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@real_rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@same_name_warningso:Set: @hash{:@filename@ : @options{0[o:Sass::Tree::PropNode;[I" right;T: @valueo; ;I" right;T;I" right;T; 0; iw; o; ; o;; iw;i;o;; iw;i";@ ;@ ;@ ;@: @tabsi:@prop_syntax:new:@children[;0;@; iw; o; ; o;; iw;i;o;; iw;i";@ ;@ :@name_source_rangeo; ; @;o;; iw;i;@ ;@ :@value_source_rangeo; ; o;; iw;i;@ ;@ ;@ u;h[o:!Sass::Script::Tree::Variable : @nameI" bottom:ET:@underscored_nameI" bottom;T:@css_variable_warning0: @lineix:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; ix: @offseti : @end_poso;; ix;i: @fileI"s/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/helpers/_mixins.scss;T:@importero:Sass::Rails::SassImporter: @rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@real_rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@same_name_warningso:Set: @hash{:@filename@ : @options{0[o:Sass::Tree::PropNode;[I" bottom;T: @valueo; ;I" bottom;T;I" bottom;T; 0; ix; o; ; o;; ix;i;o;; ix;i%;@ ;@ ;@ ;@: @tabsi:@prop_syntax:new:@children[;0;@; ix; o; ; o;; ix;i;o;; ix;i%;@ ;@ :@name_source_rangeo; ; @;o;; ix;i;@ ;@ :@value_source_rangeo; ; o;; ix;i;@ ;@ ;@ u;hü[o:!Sass::Script::Tree::Variable : @nameI" left:ET:@underscored_nameI" left;T:@css_variable_warning0: @lineiy:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; iy: @offseti : @end_poso;; iy;i: @fileI"s/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/helpers/_mixins.scss;T:@importero:Sass::Rails::SassImporter: @rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@real_rootI"h/mnt/storage2/reveal/public_html/cutmaster.reveal.digital/ruby-app/app/assets/stylesheets/main.scss;F:@same_name_warningso:Set: @hash{:@filename@ : @options{0[o:Sass::Tree::PropNode;[I" left;T: @valueo; ;I" left;T;I" left;T; 0; iy; o; ; o;; iy;i;o;; iy;i;@ ;@ ;@ ;@: @tabsi:@prop_syntax:new:@children[;0;@; iy; o; ; o;; iy;i;o;; iy;i;@ ;@ :@name_source_rangeo; ; @;o;; iy;i;@ ;@ :@value_source_rangeo; ; o;; iy;i;@ ;@ ;@ ; 0; @ ;it;o; ;o;;it;i;o;;it;i?;@;@;@T; 0; @ :@templateI"ñ/*------------------------------------*\ $MIXINS \*------------------------------------*/ /** * Target devices based on pixel ratio */ @mixin device-pixel-ratio($ratio: 2) { @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: #{($ratio*10)}/10), only screen and (min-device-pixel-ratio: $ratio), only screen and (min-resolution: #{($ratio*96)}dpi), only screen and (min-resolution: #{$ratio}dppx) { @content; } } /** * Link states * * @include states { * color: blue; * } */ @mixin states() { &:hover, &:active, &:focus { @content; } } /** * Style all headings at once * * @include headings { * color: red; * } */ @mixin headings() { h1, h2, h3, h4, h5, h6 { @content; } } /** * Vertically align an element * inside its container * * .thing { @include vertically-align; } */ @mixin vertically-align { position: relative; top: 50%; transform: translateY(-50%); } /** * Horizontally align an element * inside its container * * .thing { @include horizontally-align; } */ @mixin horizontally-align { position: relative; left: 50%; transform: translateX(-50%); } /** * Centrally align an element * inside its container * * .thing { @include centrally-align; } */ @mixin centrally-align { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } /** * SVG background images with fallback * * .thing { @include svg-background(icon-red); } */ @mixin svg-background($image) { $svg-image: $image + '.svg'; background-image: file-url($svg-image); } /** * Set the position and top, right, bottom, left values * * .thing { @include position(relative, 0, 1px, 10px, 0); } */ @mixin position($position, $top, $right, $bottom, $left) { position: $position; @if $top { top: $top; } @if $right { right: $right; } @if $bottom { bottom: $bottom; } @if $left { left: $left; } } ; T;i;o; ;o;;i;i;o;;i;i;@;@;@T