sass-site/source/assets/css/styleguide/_guide.scss.erb

@import "typography";
@import "color";

.guide-description-list {
  @extend %description-list;

  .content-primary & { max-width: none; }

  %split-by { vertical-align: middle; }
}

.block {
  float: left;
  height: 1.5em;
  border: 0 solid $color-background {
    right-width: $gutter-width / 2;
     left-width: $gutter-width / 2;
  }
  background: $color-background-shade;
}

@for $i from 1 through susy-get(columns, <%= data.layout.susy.total_columns %>) {
  .by-#{$i}  {
    @extend %split-by;

    .block { width: 100 / $i * 1%; }
  }
}


.responsive-test {
  @include square(100%);
  overflow: hidden {
    x: scroll;
  }

  ul { @extend %reset-list; }

  li { position: relative; }

  h3 { padding: 0; }

  iframe { @include box-shadow(0 1px 1px $color-shadow)}
}

.width-only iframe { height: 640px; }

.styleguide_responsive-test {
  .toolkit,
  .pop-stripe,
  .banner,
  .page-header,
  .release,
  .contentinfo { @extend .visually-hidden; }

  .page {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@import "toolkit";

[href*="404"],
[href*="htaccess"],
[href*="humans"],
[href*="robots"],
[href*="sitemap"] { @extend %hidden; }



@include breakpoint($tablet-large) {
  .content-primary .swatches { max-width: none; }

  .responsive-test-url {
    @extend %table-layout-tablet-large;
    text-align: left;

    fieldset {
      display: table-row;
      padding: 0;
    }

    p {
      @extend %table-layout-cell-tablet-large;
      padding: 0;
      width: 100%;

      &:last-child {
        width: 1px;
        padding-left: $gutter-width;
        text-align: right;
        white-space: nowrap;

        .checkbox { margin-right: 0; }
      }
    }

    label { padding-top: 0; }

    input[type="text"] { width: 100%; }
  }

  .responsive-test {
    ul { @extend %clear-fix-tablet-large; }
  }

  .frame {
    float: left;
    margin: 0 .5em;
  }
}