typecho/admin/scss/grid.scss

/*
 * Bento Grid System
 * Source: https://github.com/fenbox/bento
 * Version: 1.2.7
 * Update: 2013.11.15
 */

//
// Config
//
$columns: 12;
$column-width: 100% / $columns;
$gutter-width: 20px;


// Break point
$screen-tablet:  768px;
$screen-desktop: 992px;
$screen-wide: 1200px;

// Column group
.colgroup {
  @extend .clearfix;
}

.colgroup [class*="col-"] {
  float: left;
  min-height: 1px;
  padding-right: $gutter-width / 2;
  padding-left: $gutter-width / 2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.colgroup [class*="push-"],
.colgroup [class*="pull-"] {
  position: relative;
}


/*
 * Mobile and up
 */

@for $index from 1 through $columns {
  .col-mb-#{$index} {
    width: $column-width * $index;
  }
}


/*
 * Tablet and up
 */

@media (min-width: $screen-tablet) {
  .container {
    margin-left: auto;
    margin-right: auto;
    max-width: $screen-tablet - ($gutter-width * 2);
    @extend .center-block;
  }

  // Colunms
  @for $index from 1 through $columns {
    .col-tb-#{$index} {
      width: $column-width * $index;
    }
  }

  // Offset
  @for $index from 0 through $columns {
    .col-tb-offset-#{$index} {
      margin-left: $column-width * $index;
    }
  }

  // Pull
  @for $index from 0 through $columns {
    .col-tb-pull-#{$index} {
      right: $column-width * $index;
    }
  }

  // Push
  @for $index from 0 through $columns {
    .col-tb-push-#{$index} {
      left: $column-width * $index;
    }
  }

  // Groups
  .colgroup {
    margin-right: $gutter-width / -2;
    margin-left: $gutter-width / -2;
  }
}


/*
 * Desktop and up
 */

@media (min-width: $screen-desktop) {
  .container {
    max-width: $screen-desktop - ($gutter-width * 2);
  }

  // Colunms
  @for $index from 1 through $columns {
    .col-#{$index} {
      width: $column-width * $index;
    }
  }

  // Offset
  @for $index from 0 through $columns {
    .col-offset-#{$index} {
      margin-left: $column-width * $index;
    }
  }

  // Pull
  @for $index from 0 through $columns {
    .col-pull-#{$index} {
      right: $column-width * $index;
    }
  }

  // Push
  @for $index from 0 through $columns {
    .col-push-#{$index} {
      left: $column-width * $index;
    }
  }
}


/*
 * Widescreen and up
 */

@media (min-width: $screen-wide) {
  .container {
    max-width: $screen-wide - ($gutter-width * 2);
  }

  // Colunms
  @for $index from 1 through $columns {
    .col-wd-#{$index} {
      width: $column-width * $index;
    }
  }

  // Offset
  @for $index from 0 through $columns {
    .col-wd-offset-#{$index} {
      margin-left: $column-width * $index;
    }
  }

  // Pull
  @for $index from 0 through $columns {
    .col-wd-pull-#{$index} {
      right: $column-width * $index;
    }
  }

  // Push
  @for $index from 0 through $columns {
    .col-wd-push-#{$index} {
      left: $column-width * $index;
    }
  }
}


/*
 * Responsive kit
 */

// Hidden in mobile and down
@media (max-width: $screen-tablet - 1px) {
  .kit-hidden-mb {
    display: none;
  }
}

// Hidden in tablet and down
@media (max-width: $screen-desktop - 1px) {
  .kit-hidden-tb {
    display: none;
  }
}

// Hidden in descktop and down
@media (max-width: $screen-wide - 1px) {
  .kit-hidden {
    display: none;
  }
}


/*
 * Clearfix
 */
.clearfix {
  zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}