src/resources/themes/vendor/compass-recipes/stylesheets/recipes/effect/_folded-corner.scss

   1 /**
   2  * Corner folded with pure CSS
   3  *
   4  * Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 9+.
   5  * IE8 is not supported because it not render properly box-shadow and
   6  * pseudo element should be selected with ::element and not :element
   7  *
   8  * @thanks Nicolas Gallagher @necolas
   9  * @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
  10  */
  11
  12 @import "recipes/shared/pseudo-element";
  13
  14 @mixin folded-corner (
  15     $position: top-right,
  16     $color: #ddd,
  17     $background-color: #fff,
  18     $width: 1em,
  19     $border-radius: .3em,
  20     $box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
  21 {
  22     position: relative;
  23     overflow: hidden;
  24
  25     &::before
  26     {
  27         @include pseudo-element;
  28         border-style: solid;
  29
  30         @include box-shadow($box-shadow);
  31
  32         @if ($position == 'top-right')
  33         {
  34             top: 0;
  35             right: 0;
  36             border-width: 0 $width $width 0;
  37             border-color: $color $background-color;
  38             @include border-radius(0 0 0 $border-radius);
  39         }
  40         @elseif ($position == 'top-left')
  41         {
  42             top: 0;
  43             left: 0;
  44             border-width: $width $width 0 0;
  45             border-color: $background-color $color;
  46             @include border-radius(0 0 $border-radius 0);
  47         }
  48         @elseif ($position == 'bottom-right')
  49         {
  50             bottom: 0;
  51             right: 0;
  52             border-width: 0 0 $width $width;
  53             border-color: $background-color $color;
  54             @include border-radius($border-radius 0 0 0);
  55         }
  56         @elseif ($position == 'bottom-left')
  57         {
  58             bottom: 0;
  59             left: 0;
  60             border-width: $width 0 0 $width;
  61             border-color: $color $background-color;
  62             @include border-radius(0 $border-radius 0 0);
  63         }
  64     }
  65 }