compass/examples/css3/src/main.scss

@import "blueprint/reset";
@import "base";

$border_color: #aaaaaa;

#container {
  @include container; }

$min_width: 340px;

.examples {
  margin-bottom: 1em;
  @include row;
  min-width: $min_width * 3 + 20px * 2 + 20px; }

h1 {
  text-align: center; }

.example, .gutter {
  min-height: 21em; }

.example {
  @include column;
  width: 30%;
  min-width: $min_width;
  border: 4px solid #{$border_color};
  @include border-radius(0.667em);
  @include box-shadow(darken($border_color, 40), 5px, 5px, 2px);
  margin-bottom: 1em;
  h2 {
    font-family: Angelina;
    margin: 0.5em 0 1em;
    text-align: center; } }

.gutter {
  display: block;
  float: left;
  width: 2.5%;
  min-width: 20px;
  content: " "; }

.example {
  @include linear-gradient(color_stops(white, #cccccc));
  pre {
    padding: 1em;
    margin: 1em;
    color: white;
    text-shadow: 1px 1px 2px black;
    font-weight: bold; } }

#background-clip {
  pre {
    background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
    border: 1em solid rgba(255, 0, 0, 0.25); }
  .padding-box {
    @include background-clip(padding-box);
    @include background-origin(padding-box); }
  .border-box {
    @include background-clip(border-box);
    @include background-origin(border-box); } }

#background-size {
  pre {
    background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
    border: 1em solid #{mix(red, white, 0.5)};
    border: 1em solid rgba(255, 0, 0, 0.25); }
  .top-left {
    @include background-size(50% 50%); }
  .centered {
    @include background-size(50% 50%);
    background-position: center center; } }

#gradients {
  .horizontal {
    @include linear-gradient(color_stops(#d92626, #2626d9), left); }
  .vertical {
    @include linear-gradient(color_stops(#d92626, #2626d9)); }
  .diagonal {
    @include linear-gradient(color_stops(#d92626, #2626d9), unquote("right top")); }
  .radial {
    /* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
    @include radial-gradient(color_stops(#d92626 10px, #2626d9 150px));
    // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
    // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
    // background-color: #2626d9
  }
  .radial-1 {
    // A default radial gradient:
    /* +radial-gradient(color_stops(#ddd, #aaa)) */
    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
  .radial-2 {
    // A centered gradient
    /* +radial-gradient(color_stops(#ddd, #aaa)) */
    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
  .radial-3 {
    // A centered radial gradient at the top
    /* +radial-gradient(color_stops(#ddd, #aaa), "top center") */
    @include radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")); }
  .radial-4 {
    // A centered radial gradient with fixed color stops
    /* +radial-gradient(color_stops(#ddd 20px, #aaa 50px)) */
    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)); }
  .radial-5 {
    // A centered gradient with several color stops
    /* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00)) */
    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
  .radial-6 {
    // A centered gradient with color stops
    /* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c)) */
    @include radial-gradient(color_stops(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }