Sha256: 5f1d7d79865626278a4a8d396f3926ce8a95a5f747f1140ffa558f8435e784d8
Contents?: true
Size: 1.74 KB
Versions: 15
Compression:
Stored size: 1.74 KB
Contents
// Text hiding for image based text replacement.
// Higher performance than -9999px because it only renders
// the size of the actual text, not a full 9999px box.
@mixin hide-text() {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
// Heading mixins for use within components
// These match heading utilities in utilities/typography
@mixin h1 {
font-size: $h1-size;
font-weight: $font-weight-bold;
}
@mixin h2 {
font-size: $h2-size;
font-weight: $font-weight-bold;
}
@mixin h3 {
font-size: $h3-size;
font-weight: $font-weight-bold;
}
@mixin h4 {
font-size: $h4-size;
font-weight: $font-weight-bold;
}
@mixin h5 {
font-size: $h5-size;
font-weight: $font-weight-bold;
}
@mixin h6 {
font-size: $h6-size;
font-weight: $font-weight-bold;
}
// Responsive heading mixins
// There are no responsive mixins for h4-h6 because they are small
// and don't need to be smaller on mobile.
@mixin f1-responsive {
font-size: $h1-size-mobile;
// 32px on desktop
@include breakpoint(md) {
font-size: $h1-size;
}
}
@mixin f2-responsive {
font-size: $h2-size-mobile;
// 24px on desktop
@include breakpoint(md) {
font-size: $h2-size;
}
}
@mixin f3-responsive {
font-size: $h3-size-mobile;
// 20px on desktop
@include breakpoint(md) {
font-size: $h3-size;
}
}
// These use the mixins from above for responsive heading sizes.
// The following mixins can be used where it's convenient or necessary to
// couple the responsive font-size with the font-weight.
@mixin h1-responsive {
@include f1-responsive;
font-weight: $font-weight-bold;
}
@mixin h2-responsive {
@include f2-responsive;
font-weight: $font-weight-bold;
}
@mixin h3-responsive {
@include f3-responsive;
font-weight: $font-weight-bold;
}
Version data entries
15 entries across 15 versions & 2 rubygems