salsa-demo.scss

salsa-demo.scss

@import "compass/css3";
@import "salsa/salsa";

// container grids
.container {
  text-align: center;
  .element {
    @include border-radius(12px);
    @include box-shadow(0 0 40px rgba(0,0,0,.3) inset);
    @include transition(margin .5s);
    border: 6px solid rgba(0,0,0,.1);
    font-size: 40px;
    line-height: 1.9;
    font-weight: bold;
    color: rgba(0,0,0,.4);
    padding: 0;
    p {margin: 0}

    $a: #ddaa77; $b: #ffeedd;
    &.e1 {background-color: mix($a, $b, 5%);}
    &.e2 {background-color: mix($a, $b, 30%);}
    &.e3 {background-color: mix($a, $b, 10%);}
    &.e4 {background-color: mix($a, $b, 55%);}
    &.e5 {background-color: mix($a, $b, 25%);}
    &.e6 {background-color: mix($a, $b, 70%);}
    &.e7 {background-color: mix($a, $b, 40%);}
    &.e8 {background-color: mix($a, $b, 70%);}
    &.e9 {background-color: mix($a, $b, 50%);}
    &.e10 {background-color: mix($a, $b, 60%);}
  }
}


$columns: 10;

.container { @include nested-container; }

$row: 90px;
.e1 {height: $row*5;}
.e2 {height: $row*5;}
.e3 {height: $row*5;}
.e6 {height: $row*3;}

.layout {
  display: none;
}

p.layout {
  margin: 10px 0;
  padding: 3px;
  @include border-radius(4px);
  background: rgba(0,0,0,.05);
}

@media (min-width: 960px) {
  .layout1 {
    display: block;
  }
  
  // Nested grids AG test
  .e1 {@include grid(2)}
  .e2 {@include grid(6 container);}
  .e3 {@include grid(2)}
  .e4 {@include grid(3/6)}
  .e5 {@include grid(3/6)}
  .e6 {@include grid(2/6)}
  .e7 {@include grid(4/6 container);}
  .e8 {@include grid(2/4)}
  .e9 {@include grid(2/4)}
  .e10 {@include grid(100%)}

}

@media (min-width: 880px) and (max-width: 960px) {
  .layout2 {
    display: block;
  }

  // Source order manipulations
  .e1 {@include grid(2, 8)}
  .e2 {@include grid(6 container, 0);}
  .e3 {@include grid(2, 6)}
  .e4 {@include grid(3/6)}
  .e5 {@include grid(3/6)}
  .e6 {@include grid(2/6)}
  .e7 {@include grid(4/6 container);}
  .e8 {@include grid(2/4, 0)}
  .e9 {@include grid(2/4, 2/4)}
  .e10 {@include grid(100%, row)}

}

@media (min-width: 800px) and (max-width: 880px) {
  .layout3 {
    display: block;
  }

  // 2-column nested grids, with an off-grid element
  .e1 {@include grid(3, 7)}
  .e2 {@include grid(7 container, 0);}
  .e3 {@include grid(100%, row)}
  .e4 {@include grid(60%, 40%)}
  .e5 {@include grid(60%, -20%)}
  .e6 {@include grid(2/6, row)}
  .e7 {@include grid(4/6 container);}
  .e8 {@include grid(1/4)}
  .e9 {@include grid(1/4)}
  .e10 {@include grid(2/4)}

  .e1 {height: $row*4;}
  .e2 {height: $row*4;}
  .e3 {height: $row;}
  .e6 {height: $row*2;}
}

@media (min-width: 720px) and (max-width: 800px) {
  .layout4 {
    display: block;
  }

  // 1-column nested grid - variable widths
  .e1 {@include grid(100%)}
  .e2 {@include grid(7 container, 15%); @include row}
  .e3 {@include grid(100%, row)}
  .e4 {@include grid(1/7, 5/7)}
  .e5 {@include grid(1/7, 6/7)}
  .e6 {@include grid(5/7, 0)}
  .e7 {@include grid(100% container, row);}
  .e8 {@include grid(1/7)}
  .e9 {@include grid(1/7)}
  .e10 {@include grid(5/7)}

  .e1 {height: $row;}
  .e2 {height: $row*4;}
  .e3 {height: $row;}
  .e6 {height: $row;}
}

@media (min-width: 640px) and (max-width: 720px) {
  .layout5 {
    display: block;
  }

  // No grid (custom width values), off-canvas effect (hover)
  .e1 {@include grid(25%, -25%)}
  .e2 {@include grid(75% container)}
  .e3 {@include grid(25%)}
  .e4 {@include grid(15%)}
  .e5 {@include grid(33%)}
  .e6 {@include grid(52%)}
  .e7 {@include grid(100% container, row);}
  .e8 {@include grid(25%)}
  .e9 {@include grid(25%)}
  .e10 {@include grid(88%, 0)}

  .container{
    overflow: hidden;
    &:hover{
    .e1 {@include grid(25%, 0)}
    .e2 {@include grid(75% container, 25%)}
    .e3 {@include grid(25%, 100%)}
    }
  }

  .e1 {height: $row*4;}
  .e2 {height: $row*4;}
  .e3 {height: $row*3;}
  .e6 {height: $row;}
  .container .element.e2, .container .element.e7 {padding-top: 8px;}
}


@media (max-width: 640px) {
  .layout6 {
    display: block;
  }

  // 1-column mobile stack
  .e1 {@include grid(100%)}
  .e2 {@include grid(100%)}
  .e3 {@include grid(100%)}
  .e4 {@include grid(50%)}
  .e5 {@include grid(50%)}
  .e6 {@include grid(100%)}
  .e7 {@include grid(100%)}
  .e8 {@include grid(100%)}
  .e9 {@include grid(100%)}
  .e10 {@include grid(100%)}

  .e1 {height: $row;}
  .e2 {height: auto;}
  .e3 {height: $row;}
  .e6 {height: $row;}
}