@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 $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)} } @include breakpoint($tablet-large) { .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; } } .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; }