Sha256: 3678a1a27fd7e66c00cea85fffc6c92122ee564ba7433ef213ebcd1263f943ab
Contents?: true
Size: 1.55 KB
Versions: 10
Compression:
Stored size: 1.55 KB
Contents
//
// Non-semantic helper classes
//
@mixin h5bp-helpers {
.ir { @include image-replacement; }
.hidden { @include hidden; }
.visuallyhidden { @include visually-hidden; }
.invisible { @include invisible; }
.clearfix { @include micro-clearfix; }
}
// For image replacement
@mixin image-replacement($img: none, $x: 50%, $y: 50%) {
display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0;
@if $img != none {
background-image: image-url($img);
background-position: $x $y;
}
br { display: none; }
}
// Uses image dimensions
@mixin sized-image-replacement($img, $x: 50%, $y: 50%) {
@include image-replacement($img, $x, $y);
width: image-width($img);
height: image-height($img);
}
// Hide from both screenreaders and browsers: h5bp.com/u
@mixin hidden {
display: none !important;
visibility: hidden;
}
// Hide only visually, but have it available for screenreaders: h5bp.com/v
@mixin visually-hidden {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
&.focusable:active, &.focusable:focus {
clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
}
}
// Hide visually and from screenreaders, but maintain layout
@mixin invisible { visibility: hidden; }
// Contain floats: h5bp.com/q
@mixin micro-clearfix {
&:before, &:after { content: ""; display: table; }
&:after { clear: both; }
& { *zoom: 1; }
}
Version data entries
10 entries across 10 versions & 2 rubygems