src/resources/themes/vendor/compass-recipes/tests/recipes/shadow/drop/s.scss

   1 @import "tests";
   2
   3 @import "recipes/shadow";
   4
   5 $background: #eee;
   6
   7 div
   8 {
   9     width: 18em;
  10     height: 10em;
  11     margin: 5em auto;
  12     background: $background;
  13     border: 1px solid #ccc;
  14
  15     p
  16     {
  17         padding: 3em 0;
  18         text-align: center;
  19     }
  20 }
  21
  22 a.more
  23 {
  24     display: block;
  25     width: 100px;
  26     margin: -50px auto 0;
  27 }
  28 /*
  29  * This is required is you want to apply some transform on the element using drop shadow
  30  */
  31
  32 //.drop-shadow-curled-corners,
  33 .drop-shadow-curved-vt,
  34 .drop-shadow-lifted-corners,
  35 .drop-shadow-perspective,
  36 {
  37     @include drop-shadow-transform-requirement($background);
  38
  39     &:hover
  40     {
  41         @include transform(rotate(3deg));
  42     }
  43 }
  44
  45 .drop-shadow-curled-corners
  46 {
  47     @include drop-shadow-curled-corners;
  48 }
  49
  50 .drop-shadow-curved-vt
  51 {
  52     @include drop-shadow-curved;
  53 }
  54 /*
  55 .drop-shadow-flying
  56 {
  57     @include drop-shadow-flying;
  58 }
  59 */
  60 .drop-shadow-lifted-corners
  61 {
  62     @include drop-shadow-lifted-corners;
  63 }
  64
  65 .drop-shadow-perspective
  66 {
  67     @include drop-shadow-perspective;
  68 }
  69
  70 .drop-shadow-raised
  71 {
  72     @include drop-shadow-raised;
  73 }