src/resources/themes/vendor/compass-recipes/stylesheets/recipes/shape/symbol/_infinity.scss

   1 /**
   2  * Shape/Symbol/Infinity
   3  *
   4  * @author Nicolas Gallagher @necolas
   5  * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
   6  */
   7 @mixin infinity($width: 212px, $height: 100px, $background-color: transparent)
   8 {
   9     $coefficient: 2.12;
  10     @if $width == false
  11     {
  12         $width : $height*$coefficient;
  13     }
  14     @if $height == false
  15     {
  16         $height : $width/$coefficient;
  17     }
  18     position: relative;
  19     width: $width;
  20     height: $height;
  21
  22     &:before,
  23     &:after
  24     {
  25         content: "";
  26         position: absolute;
  27         top: 0;
  28
  29         width: $height*.6;
  30         height: $height*.6;
  31         border: $height*.2 solid $background-color;
  32     }
  33
  34     $radius: $height/2;
  35     &:before
  36     {
  37         left: 0;
  38         @include border-radius($radius $radius 0 $radius);
  39         @include transform(rotate(-45deg));
  40     }
  41
  42     &:after
  43     {
  44         right: 0;
  45         @include border-radius($radius $radius $radius 0);
  46         @include transform(rotate(45deg));
  47     }
  48 }