compass 0.11.beta.6 → 0.11.beta.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -2,4 +2,4 @@
2
2
  :major: 0
3
3
  :minor: 11
4
4
  :state: beta
5
- :build: 6
5
+ :build: 7
@@ -1,8 +1,25 @@
1
- @mixin showgrid($image: "grid.png") {
2
- background: image-url($image);
1
+ @import "compass/layout/grid-background";
2
+ @import "blueprint/grid";
3
+
4
+ // Shows a background that can be used to check grid alignment.
5
+ // By default this is a pure css version that only works in browsers
6
+ // that support gradients and multiple backgrounds, but you can pass
7
+ // an image url if you prefer.
8
+ @mixin showgrid($image: false) {
9
+ @if $image {
10
+ background: image-url($image);
11
+ }
12
+ @else {
13
+ @include grid-background(
14
+ $total : $blueprint-grid-columns,
15
+ $column : $blueprint-grid-width,
16
+ $gutter : $blueprint-grid-margin,
17
+ $baseline : 20px
18
+ );
19
+ }
3
20
  }
4
21
 
5
- @mixin blueprint-debug($grid-image: "grid.png") {
22
+ @mixin blueprint-debug($grid-image: false) {
6
23
  // Use this class on any column or container to see the grid.
7
24
  // TODO: prefix this with the project path.
8
25
  .showgrid {
@@ -1,2 +1,3 @@
1
+ @import "layout/grid-background";
1
2
  @import "layout/sticky-footer";
2
3
  @import "layout/stretching";
@@ -17,18 +17,22 @@ $legacy-support-for-ie8: $legacy-support-for-ie !default;
17
17
  $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
18
18
 
19
19
  // Support for mozilla in experimental css3 properties.
20
- $experimental-support-for-mozilla : true !default;
20
+ $experimental-support-for-mozilla : true !default;
21
21
  // Support for webkit in experimental css3 properties.
22
- $experimental-support-for-webkit : true !default;
22
+ $experimental-support-for-webkit : true !default;
23
+ // Support for webkit in experimental css3 properties.
24
+ $experimental-support-for-webkit : true !default;
25
+ // Support for webkit's original (non-standard) gradient syntax.
26
+ $support-for-original-webkit-gradients : true !default;
23
27
  // Support for opera in experimental css3 properties.
24
- $experimental-support-for-opera : true !default;
28
+ $experimental-support-for-opera : true !default;
25
29
  // Support for microsoft in experimental css3 properties.
26
- $experimental-support-for-microsoft : true !default;
30
+ $experimental-support-for-microsoft : true !default;
27
31
  // Support for khtml in experimental css3 properties.
28
- $experimental-support-for-khtml : true !default;
32
+ $experimental-support-for-khtml : true !default;
29
33
  // Support for svg in experimental css3 properties.
30
34
  // Setting this to true might add significant size to your
31
35
  // generated stylesheets.
32
- $experimental-support-for-svg : false !default;
36
+ $experimental-support-for-svg : false !default;
33
37
  // Support for CSS PIE in experimental css3 properties.
34
- $experimental-support-for-pie : false !default;
38
+ $experimental-support-for-pie : false !default;
@@ -8,9 +8,19 @@ $default-background-size: 100% auto !default;
8
8
  //
9
9
  // * percentages are relative to the background-origin (default = padding-box)
10
10
  // * mixin defaults to: `$default-background-size`
11
- @mixin background-size($size: $default-background-size) {
12
- @if type-of($size) == string {
13
- $size: unquote($size);
14
- }
15
- @include experimental(background-size, $size, -moz, -webkit, -o, not -ms, not -khtml);
11
+ @mixin background-size(
12
+ $size-1: $default-background-size,
13
+ $size-2: false,
14
+ $size-3: false,
15
+ $size-4: false,
16
+ $size-5: false,
17
+ $size-6: false,
18
+ $size-7: false,
19
+ $size-8: false,
20
+ $size-9: false,
21
+ $size-10: false
22
+ ) {
23
+ $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
24
+ $sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);
25
+ @include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml);
16
26
  }
@@ -1,4 +1,5 @@
1
1
  @import "shared";
2
+ @import "compass/utilities/general/hacks";
2
3
 
3
4
  // Background property support for vendor prefixing within values.
4
5
  @mixin background(
@@ -16,12 +17,14 @@
16
17
  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
17
18
  $background-6, $background-7, $background-8, $background-9, $background-10);
18
19
  $mult-bgs: -compass-list-size($backgrounds) > 1;
19
- @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
20
- @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
21
- @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
22
- @if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); }
23
- @if $experimental-support-for-pie and (prefixed(-pie, $backgrounds) or $mult-bgs) { -pie-background: -pie($backgrounds); }
24
- background: $backgrounds;
20
+ $add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs;
21
+ @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
22
+ @if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) { background: -owg($backgrounds); }
23
+ @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
24
+ @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
25
+ @if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); }
26
+ @if $experimental-support-for-pie and $add-pie-bg { -pie-background: -pie($backgrounds); }
27
+ background: $backgrounds ;
25
28
  }
26
29
 
27
30
  @mixin background-with-css2-fallback(
@@ -60,13 +63,15 @@
60
63
  $image-10: false
61
64
  ) {
62
65
  $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
66
+ $add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1;
63
67
 
64
- @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; }
65
- @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
66
- @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
67
- @if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); }
68
- @if $experimental-support-for-pie and (prefixed(-pie, $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
69
- background-image: $images ;
68
+ @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; }
69
+ @if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); }
70
+ @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
71
+ @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
72
+ @if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); }
73
+ @if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
74
+ background-image: $images ;
70
75
  }
71
76
 
72
77
  // Emit a IE-Specific filters that renders a simple linear gradient.
@@ -87,38 +92,42 @@
87
92
 
88
93
  // Border image property support for vendor prefixing properties and values.
89
94
  @mixin border-image($value) {
90
- @if $experimental-support-for-mozilla { -moz-border-image: -moz(-compass-list($value)); }
91
- @if $experimental-support-for-webkit { -webkit-border-image: -webkit(-compass-list($value)); }
92
- @if $experimental-support-for-opera { -o-border-image: -o(-compass-list($value)); }
93
- @if $experimental-support-for-svg { border-image: -svg(-compass-list($value)); }
94
- border-image: $value;
95
+ @if $experimental-support-for-mozilla { -moz-border-image: -moz(-compass-list($value)); }
96
+ @if $support-for-original-webkit-gradients { -webkit-border-image: -owg(-compass-list($value)); }
97
+ @if $experimental-support-for-webkit { -webkit-border-image: -webkit(-compass-list($value)); }
98
+ @if $experimental-support-for-opera { -o-border-image: -o(-compass-list($value)); }
99
+ @if $experimental-support-for-svg { border-image: -svg(-compass-list($value)); }
100
+ border-image: $value;
95
101
  }
96
102
 
97
103
  // List style image property support for vendor prefixing within values.
98
104
  @mixin list-style-image($image) {
99
- @if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
100
- @if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
101
- @if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); }
102
- @if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); }
103
- list-style-image: $image ;
105
+ @if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
106
+ @if $support-for-original-webkit-gradients and prefixed(-owg, $image) { list-style-image: -owg($image); }
107
+ @if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
108
+ @if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); }
109
+ @if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); }
110
+ list-style-image: $image ;
104
111
  }
105
112
 
106
113
  // List style property support for vendor prefixing within values.
107
114
  @mixin list-style($value) {
108
115
  $value: -compass-list($value);
109
- @if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
110
- @if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
111
- @if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); }
112
- @if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
113
- list-style-image: $value ;
116
+ @if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
117
+ @if $support-for-original-webkit-gradients and prefixed(-owg, $value) { list-style-image: -owg($value); }
118
+ @if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
119
+ @if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); }
120
+ @if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
121
+ list-style-image: $value ;
114
122
  }
115
123
 
116
124
  // content property support for vendor prefixing within values.
117
125
  @mixin content($value) {
118
126
  $value: -compass-list($value);
119
- @if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
120
- @if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); }
121
- @if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); }
122
- @if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }
123
- content: $value ;
127
+ @if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
128
+ @if $support-for-original-webkit-gradients and prefixed(-owg, $value) { content: -owg($value); }
129
+ @if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); }
130
+ @if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); }
131
+ @if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }
132
+ content: $value ;
124
133
  }
@@ -0,0 +1,160 @@
1
+ @import "compass/css3/images";
2
+ @import "compass/css3/background-size";
3
+
4
+ // Set the color of your columns
5
+ $grid-background-column-color : rgba(100, 100, 225, 0.25) !default;
6
+ // Set the color of your gutters
7
+ $grid-background-gutter-color : rgba(0, 0, 0, 0) !default;
8
+
9
+ // Set the total number of columns in your grid
10
+ $grid-background-total-columns : 24 !default;
11
+ // Set the width of your columns
12
+ $grid-background-column-width : 30px !default;
13
+ // Set the width of your gutters
14
+ $grid-background-gutter-width : 10px !default;
15
+ // Set the offset, if your columns are padded in from the container edge
16
+ $grid-background-offset : 0px !default;
17
+
18
+ // Set the color of your baseline
19
+ $grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default;
20
+ // Set the height of your baseline grid
21
+ $grid-background-baseline-height : 1.5em !default;
22
+
23
+ // optionally force your grid-image to remain fluid
24
+ // no matter what units you used to declared your grid.
25
+ $grid-background-force-fluid : false !default;
26
+
27
+
28
+ // Create the gradient needed for baseline grids
29
+ @function get-baseline-gradient(
30
+ $color : $grid-background-baseline-color
31
+ ) {
32
+ $gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%);
33
+ @return $gradient;
34
+ }
35
+
36
+ // Create the color-stops needed for horizontal grids
37
+ @function build-grid-background(
38
+ $total : $grid-background-total-columns,
39
+ $column : $grid-background-column-width,
40
+ $gutter : $grid-background-gutter-width,
41
+ $offset : $grid-background-offset,
42
+ $column-color : $grid-background-column-color,
43
+ $gutter-color : $grid-background-gutter-color
44
+ ) {
45
+ $grid: compact();
46
+ $grid: append($grid, $gutter-color $offset, comma);
47
+ @for $i from 0 to $total {
48
+
49
+ // $a represents the start of this column, initially equal to the offset
50
+ $a: $offset;
51
+ @if $i > 0 { $a: $a + (($column + $gutter) * $i); }
52
+
53
+ // $g represents the start of this gutter, equal to $a plus one column-width
54
+ $g: $a + $column;
55
+
56
+ // $z represents the end of a gutter, equal to $g plus one gutter-width
57
+ $z: $g + $gutter;
58
+
59
+ @if (unit($a) == "%") and ($i == ($total - 1)) {
60
+ $z: 100%;
61
+ }
62
+
63
+ // and we add this column/gutter pair to our grid
64
+ $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z));
65
+ }
66
+
67
+ @return $grid;
68
+ }
69
+
70
+ // Return the gradient needed for horizontal grids
71
+ @function get-column-gradient(
72
+ $total : $grid-background-total-columns,
73
+ $column : $grid-background-column-width,
74
+ $gutter : $grid-background-gutter-width,
75
+ $offset : $grid-background-offset,
76
+ $column-color : $grid-background-column-color,
77
+ $gutter-color : $grid-background-gutter-color,
78
+ $force-fluid : $grid-background-force-fluid
79
+ ) {
80
+ $grid: unquote("");
81
+
82
+ // don't force fluid grids when they are already fluid.
83
+ @if unit($column) == "%" { $force-fluid: false; }
84
+
85
+ @if $force-fluid {
86
+ $grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color);
87
+ } @else {
88
+ $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
89
+ }
90
+
91
+ // return the horizontal grid as a gradient
92
+ $gradient: linear-gradient(left, $grid);
93
+ @return $gradient;
94
+ }
95
+
96
+ // Convert a grid from fixed units into percentages.
97
+ @function get-column-fluid-grid(
98
+ $total : $grid-background-total-columns,
99
+ $column : $grid-background-column-width,
100
+ $gutter : $grid-background-gutter-width,
101
+ $offset : $grid-background-offset,
102
+ $column-color : $grid-background-column-color,
103
+ $gutter-color : $grid-background-gutter-color
104
+ ) {
105
+ $context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2));
106
+ $offset: $offset / $context * 100%;
107
+ $column: $column / $context * 100%;
108
+ $gutter: $gutter / $context * 100%;
109
+
110
+ // return the horizontal grid as a set of color-stops
111
+ $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
112
+ @return $grid;
113
+ }
114
+
115
+
116
+ // Add just the baseline grid to an element's background
117
+ @mixin baseline-grid-background(
118
+ $baseline : $grid-background-baseline-height,
119
+ $color : $grid-background-baseline-color
120
+ ) {
121
+ @include background-image(get-baseline-gradient($color));
122
+ @include background-size(100% $baseline);
123
+ background-position: left top;
124
+ }
125
+
126
+ // Add just the horizontal grid to an element's background
127
+ @mixin column-grid-background(
128
+ $total : $grid-background-total-columns,
129
+ $column : $grid-background-column-width,
130
+ $gutter : $grid-background-gutter-width,
131
+ $offset : $grid-background-offset,
132
+ $column-color : $grid-background-column-color,
133
+ $gutter-color : $grid-background-gutter-color,
134
+ $force-fluid : $grid-background-force-fluid
135
+ ) {
136
+ @include background-image(
137
+ get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
138
+ );
139
+ background-position: left top;
140
+ }
141
+
142
+ // Add both horizontal and baseline grids to an element's background
143
+ @mixin grid-background(
144
+ $total : $grid-background-total-columns,
145
+ $column : $grid-background-column-width,
146
+ $gutter : $grid-background-gutter-width,
147
+ $baseline : $grid-background-baseline-height,
148
+ $offset : $grid-background-offset,
149
+ $column-color : $grid-background-column-color,
150
+ $gutter-color : $grid-background-gutter-color,
151
+ $baseline-color : $grid-background-baseline-color,
152
+ $force-fluid : $grid-background-force-fluid
153
+ ) {
154
+ @include background-image(
155
+ get-baseline-gradient($baseline-color),
156
+ get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
157
+ );
158
+ @include background-size(100% $baseline, auto);
159
+ background-position: left top;
160
+ }
@@ -25,16 +25,16 @@ $base-half-leader: $base-leader / 2;
25
25
  @mixin establish-baseline($font-size: $base-font-size) {
26
26
  body {
27
27
  font-size: $font-size / $ie-font-ratio;
28
- @include adjust-leading-to(1, $font-size);
28
+ @include adjust-leading-to(1, $font-size);
29
29
  }
30
30
  html>body {
31
- font-size: $font-size;
32
- }
31
+ font-size: $font-size;
32
+ }
33
33
  }
34
34
 
35
35
  // Show a background image that can be used to debug your alignments.
36
36
  @mixin debug-vertical-alignment($img: 'underline.png') {
37
- background: url($img);
37
+ background: url($img);
38
38
  }
39
39
 
40
40
  // Adjust a block to have a different font size and leading to maintain the rhythm.
@@ -44,37 +44,46 @@ $base-half-leader: $base-leader / 2;
44
44
  // Use $from_size to adjust from a non-base font-size.
45
45
  @mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
46
46
  font-size: 1em * $to-size / $from-size;
47
- @include adjust-leading-to($lines, $to-size);
47
+ @include adjust-leading-to($lines, $to-size);
48
48
  }
49
49
 
50
50
  @mixin adjust-leading-to($lines, $font-size: $base-font-size) {
51
- line-height: 1em * $lines * $base-line-height / $font-size;
51
+ line-height: 1em * $lines * $base-line-height / $font-size;
52
+ }
53
+
54
+ // Calculate rhythm units
55
+ @function rhythm(
56
+ $lines: 1,
57
+ $font-size: $base-font-size
58
+ ) {
59
+ $rhythm: 1em * $lines * $base-line-height / $font-size;
60
+ @return $rhythm;
52
61
  }
53
62
 
54
63
  // Apply leading whitespace
55
64
  @mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
56
- #{$property}-top: 1em * $lines * $base-line-height / $font-size;
65
+ #{$property}-top: rhythm($lines, $font-size);
57
66
  }
58
67
 
59
68
  @mixin padding-leader($lines: 1, $font-size: $base-font-size) {
60
- @include leader($lines, $font-size, padding);
69
+ @include leader($lines, $font-size, padding);
61
70
  }
62
71
 
63
72
  @mixin margin-leader($lines: 1, $font-size: $base-font-size) {
64
- @include leader($lines, $font-size, margin);
73
+ @include leader($lines, $font-size, margin);
65
74
  }
66
75
 
67
76
  // Apply trailing whitespace
68
77
  @mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
69
- #{$property}-bottom: 1em * $lines * $base-line-height / $font-size;
78
+ #{$property}-bottom: rhythm($lines, $font-size);
70
79
  }
71
80
 
72
81
  @mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
73
- @include trailer($lines, $font-size, padding);
82
+ @include trailer($lines, $font-size, padding);
74
83
  }
75
84
 
76
85
  @mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
77
- @include trailer($lines, $font-size, margin);
86
+ @include trailer($lines, $font-size, margin);
78
87
  }
79
88
 
80
89
  // Whitespace application shortcut
@@ -90,9 +99,9 @@ $base-half-leader: $base-leader / 2;
90
99
  @mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
91
100
  border-#{$side}: {
92
101
  style: $border-style;
93
- width: 1em * $width / $font-size;
102
+ width: 1em * $width / $font-size;
94
103
  };
95
- padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width);
104
+ padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width);
96
105
  }
97
106
 
98
107
  // Aplly rhythm borders equally to all sides
@@ -100,25 +109,25 @@ $base-half-leader: $base-leader / 2;
100
109
  border: {
101
110
  style: $border-style;
102
111
  width: 1em * $width / $font-size; };
103
- padding: 1em / $font-size * ($lines * $base-line-height - $width);
112
+ padding: 1em / $font-size * ($lines * $base-line-height - $width);
104
113
  }
105
114
 
106
115
  // Apply a leading rhythm border
107
116
  @mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
108
- @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
117
+ @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
109
118
  }
110
119
 
111
120
  // Apply a trailing rhythm border
112
121
  @mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
113
- @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
122
+ @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
114
123
  }
115
124
 
116
125
  // Apply both leading and trailing rhythm borders
117
126
  @mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
118
127
  @include leading-border($width, $lines, $font-size, $border-style);
119
- @include trailing-border($width, $lines, $font-size, $border-style);
128
+ @include trailing-border($width, $lines, $font-size, $border-style);
120
129
  }
121
130
 
122
131
  @mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
123
- @include horizontal-borders($width, $lines, $font-size, $border-style);
132
+ @include horizontal-borders($width, $lines, $font-size, $border-style);
124
133
  }