github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Round px values in rhythm() function of vertical_rhythm partial.

Browse Source 
Also simplify code for vertical_rhythm's leader and trailer mixins.

Alternate to the pull-request in #778
This commit is contained in:
JohnAlbin 2012-03-12 17:36:55 +08:00
parent a700e5d521
commit e92d63fd21
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss
View File

@ -113,6 +113,10 @@ $base-half-leader: $base-leader / 2;
@warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function"; @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
} }
$rhythm: $font-unit * $lines * $base-line-height / $font-size; $rhythm: $font-unit * $lines * $base-line-height / $font-size;
// Round the pixels down to nearest integer.
@if unit($rhythm) == px {
$rhythm: floor($rhythm);
}
@return $rhythm; @return $rhythm;
} }
@ -129,40 +133,32 @@ $base-half-leader: $base-leader / 2;
// Apply leading whitespace. The $property can be margin or padding. // Apply leading whitespace. The $property can be margin or padding.
@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) { @mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
$leader: rhythm($lines, $font-size); #{$property}-top: rhythm($lines, $font-size);
@if unit($leader) == px {
$leader: floor($leader)
}
#{$property}-top: $leader;
} }
// Apply leading whitespace as padding. // Apply leading whitespace as padding.
@mixin padding-leader($lines: 1, $font-size: $base-font-size) { @mixin padding-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, padding); padding-top: rhythm($lines, $font-size);
} }
// Apply leading whitespace as margin. // Apply leading whitespace as margin.
@mixin margin-leader($lines: 1, $font-size: $base-font-size) { @mixin margin-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, margin); margin-top: rhythm($lines, $font-size);
} }
// Apply trailing whitespace. The $property can be margin or padding. // Apply trailing whitespace. The $property can be margin or padding.
@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) { @mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
$leader: rhythm($lines, $font-size); #{$property}-bottom: rhythm($lines, $font-size);
@if unit($leader) == px {
$leader: ceil($leader)
}
#{$property}-bottom: $leader;
} }
// Apply trailing whitespace as padding. // Apply trailing whitespace as padding.
@mixin padding-trailer($lines: 1, $font-size: $base-font-size) { @mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, padding); padding-bottom: rhythm($lines, $font-size);
} }
// Apply trailing whitespace as margin. // Apply trailing whitespace as margin.
@mixin margin-trailer($lines: 1, $font-size: $base-font-size) { @mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, margin); margin-bottom: rhythm($lines, $font-size);
} }
// Shorthand mixin to apply whitespace for top and bottom margins and padding. // Shorthand mixin to apply whitespace for top and bottom margins and padding.