cv-website

Personal website and CV
git clone https://git.in0rdr.ch/cv-website.git
Log | Files | Refs | Pull requests |Archive | README | LICENSE

_transition.scss (2202B)


      1 // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
      2 // Example: @include transition (all 2s ease-in-out);
      3 //          @include transition (opacity 1s ease-in 2s, width 2s ease-out);
      4 //          @include transition-property (transform, opacity);
      5 
      6 @mixin transition($properties...) {
      7   // Fix for vendor-prefix transform property
      8   $needs-prefixes: false;
      9   $webkit: ();
     10   $moz: ();
     11   $spec: ();
     12 
     13   // Create lists for vendor-prefixed transform
     14   @each $list in $properties {
     15     @if nth($list, 1) == "transform" {
     16       $needs-prefixes: true;
     17       $list1: -webkit-transform;
     18       $list2: -moz-transform;
     19       $list3: ();
     20 
     21       @each $var in $list {
     22         $list3: join($list3, $var);
     23 
     24         @if $var != "transform" {
     25           $list1: join($list1, $var);
     26           $list2: join($list2, $var);
     27         }
     28       }
     29 
     30       $webkit: append($webkit, $list1);
     31       $moz:    append($moz,    $list2);
     32       $spec:   append($spec,   $list3);
     33     } @else {
     34       $webkit: append($webkit, $list, comma);
     35       $moz:    append($moz,    $list, comma);
     36       $spec:   append($spec,   $list, comma);
     37     }
     38   }
     39 
     40   @if $needs-prefixes {
     41     -webkit-transition: $webkit;
     42        -moz-transition: $moz;
     43             transition: $spec;
     44   } @else {
     45     @if length($properties) >= 1 {
     46       @include prefixer(transition, $properties, webkit moz spec);
     47     } @else {
     48       $properties: all 0.15s ease-out 0s;
     49       @include prefixer(transition, $properties, webkit moz spec);
     50     }
     51   }
     52 }
     53 
     54 @mixin transition-property($properties...) {
     55   -webkit-transition-property: transition-property-names($properties, "webkit");
     56      -moz-transition-property: transition-property-names($properties, "moz");
     57           transition-property: transition-property-names($properties, false);
     58 }
     59 
     60 @mixin transition-duration($times...) {
     61   @include prefixer(transition-duration, $times, webkit moz spec);
     62 }
     63 
     64 @mixin transition-timing-function($motions...) {
     65   // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
     66   @include prefixer(transition-timing-function, $motions, webkit moz spec);
     67 }
     68 
     69 @mixin transition-delay($times...) {
     70   @include prefixer(transition-delay, $times, webkit moz spec);
     71 }