@import "../sass/edge/user";

.custom-grid {
  @include column(3);
}

.custom-gridx {
  @include between(mini, small) {
    @include column(4);
  }

  @include below(small) {
    @include column(5);
  }
}

[data-page="animate"] {
  .box1 {
    background: red;
    width: 50px;
    height: 50px;
  }
}

.demo-grid {
  @include transition($g-transition);
  p {
    text-align : center;
    margin     : 0;
  }

  h-column {
    p {
      margin-bottom  : em(15px);
      padding-top    : em(10px);
      padding-bottom : em(10px);
      background     : #eee;
      text-align     : center;
    }

     h-column {
      p {
        background    : #ddd;
      }
      
       h-column {
        p {
          background    : #ccc;
        }
      }
    }
  }
}

.demo-tile {
  @include tile(2);
  
  @include below(small) {
    @include tile(3);
  }

  p {
    background     : #eee;
    margin-bottom  : em(15px);
    padding-top    : em(10px);
    padding-bottom : em(10px);
    text-align     : center;
  }
}


/* Custom Grid */

.cgrid-l1 { @include column(5); }
.cgrid-l2 { @include column(7); }

.cgrid-ls1 { @include column(5, 10); }
.cgrid-ls2 { @include column(7, 2); }

.cgrid-center {
  @include column(8, $centered: true);

  @include below(small) {
    @include column(6, $centered: false);
  }
}

.cgrid-losom1 {
  @include column(10, $offset: 2);

  @include below(small) {
    @include column(6, $offset: 6);
  }

  @include below(mini) {
    @include column(4);
  }
}

.cgrid-lsm1 { @include column(4, 6, 8); }
.cgrid-lsm2 { @include column(8, 6, 4); }

.cgrid-los1 { @include column(6, 6, $offset:4); }
.cgrid-los2 { @include column(2, 6); }

// Nesting

.cgrid-nest1 { @include column(6, 6); }
  .cgrid-nest1-1 { @include column(8, 8); }
  .cgrid-nest1-2 { @include column(4, 4); }
.cgrid-nest2 { @include column(4, 4); }
.cgrid-nest3 { @include column(2, 2); }
.cgrid-c { @include row($collapse: true); }

// Gutter

.cgrid-gutter-r1 {
  @include row($gutter: 50px, $width: 960px);
}

.cgrid-gutter-r2 {
  @include row($gutter: 10px);
}

.cgrid-gutter1 { @include column(8, 6); }
.cgrid-gutter2 { @include column(4, 6); }

/* Custom Tile */
.ctile-1 {
  @include tile(5, $gutter: 5px);
}

.ctile-2 {
  @include tile(5, $collapse: true);

  @include below(small) {
    @include tile(3);
  }
}

.ctile-3 {
  @include tile(5, 3, 2);
}

/* --------------------
  DESIGN CUSTOM GRID
-------------------- */

[data-page="design-grid"] {
  .dgrid-ar {
    @include row($gutter: 50px, $width: 500px);
  }

  .dgrid-a1 {
    @include column-px($size: 325px, $width: 500px, $gutter: 50px);
  }

  .dgrid-a2 {
    @include column-px($size: 125px, $width: 500px, $gutter: 50px);
  }
}

/* ----- FORM ----- */

[data-page="form"] {
  input, textarea, select {
    margin-bottom: 20px;
  }
}

[data-page="triangle"] {
  .triangle1 {
    @include triangle($color:$main-color, $width:100px, $direction:right);
  }
}