simple-compass 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. data/.gitignore +2 -0
  2. data/.rspec +1 -0
  3. data/Gemfile +6 -0
  4. data/Gemfile.lock +26 -0
  5. data/Rakefile +8 -0
  6. data/lib/simple-compass.rb +17 -0
  7. data/lib/simple-compass/sass/functions/display.rb +27 -0
  8. data/lib/simple-compass/sass/functions/lists.rb +101 -0
  9. data/lib/simple-compass/sass/functions/selectors.rb +64 -0
  10. data/lib/simple-compass/sass/functions/sprites.rb +218 -0
  11. data/lib/simple-compass/version.rb +3 -0
  12. data/sass/compass.scss +1 -0
  13. data/sass/compass/_css3.scss +20 -0
  14. data/sass/compass/_layout.scss +3 -0
  15. data/sass/compass/_reset-legacy.scss +3 -0
  16. data/sass/compass/_reset.scss +3 -0
  17. data/sass/compass/_support.scss +40 -0
  18. data/sass/compass/_typography.scss +4 -0
  19. data/sass/compass/_utilities.scss +9 -0
  20. data/sass/compass/css3/_appearance.scss +17 -0
  21. data/sass/compass/css3/_background-clip.scss +43 -0
  22. data/sass/compass/css3/_background-origin.scss +42 -0
  23. data/sass/compass/css3/_background-size.scss +26 -0
  24. data/sass/compass/css3/_border-radius.scss +130 -0
  25. data/sass/compass/css3/_box-shadow.scss +76 -0
  26. data/sass/compass/css3/_box-sizing.scss +13 -0
  27. data/sass/compass/css3/_box.scss +111 -0
  28. data/sass/compass/css3/_columns.scss +157 -0
  29. data/sass/compass/css3/_filter.scss +23 -0
  30. data/sass/compass/css3/_font-face.scss +48 -0
  31. data/sass/compass/css3/_hyphenation.scss +77 -0
  32. data/sass/compass/css3/_images.scss +132 -0
  33. data/sass/compass/css3/_inline-block.scss +22 -0
  34. data/sass/compass/css3/_opacity.scss +19 -0
  35. data/sass/compass/css3/_pie.scss +73 -0
  36. data/sass/compass/css3/_regions.scss +22 -0
  37. data/sass/compass/css3/_shared.scss +38 -0
  38. data/sass/compass/css3/_text-shadow.scss +87 -0
  39. data/sass/compass/css3/_transform-legacy.scss +87 -0
  40. data/sass/compass/css3/_transform.scss +598 -0
  41. data/sass/compass/css3/_transition.scss +221 -0
  42. data/sass/compass/css3/_user-interface.scss +17 -0
  43. data/sass/compass/layout/_grid-background.scss +178 -0
  44. data/sass/compass/layout/_sticky-footer.scss +23 -0
  45. data/sass/compass/layout/_stretching.scss +24 -0
  46. data/sass/compass/reset/_utilities-legacy.scss +135 -0
  47. data/sass/compass/reset/_utilities.scss +142 -0
  48. data/sass/compass/typography/_links.scss +3 -0
  49. data/sass/compass/typography/_lists.scss +4 -0
  50. data/sass/compass/typography/_text.scss +4 -0
  51. data/sass/compass/typography/_vertical_rhythm.scss +221 -0
  52. data/sass/compass/typography/links/_hover-link.scss +5 -0
  53. data/sass/compass/typography/links/_link-colors.scss +28 -0
  54. data/sass/compass/typography/links/_unstyled-link.scss +7 -0
  55. data/sass/compass/typography/lists/_bullets.scss +34 -0
  56. data/sass/compass/typography/lists/_horizontal-list.scss +61 -0
  57. data/sass/compass/typography/lists/_inline-block-list.scss +50 -0
  58. data/sass/compass/typography/lists/_inline-list.scss +44 -0
  59. data/sass/compass/typography/text/_ellipsis.scss +25 -0
  60. data/sass/compass/typography/text/_force-wrap.scss +12 -0
  61. data/sass/compass/typography/text/_nowrap.scss +2 -0
  62. data/sass/compass/typography/text/_replacement.scss +68 -0
  63. data/sass/compass/utilities/_color.scss +1 -0
  64. data/sass/compass/utilities/_general.scss +6 -0
  65. data/sass/compass/utilities/_links.scss +5 -0
  66. data/sass/compass/utilities/_lists.scss +6 -0
  67. data/sass/compass/utilities/_print.scss +17 -0
  68. data/sass/compass/utilities/_sprites.scss +2 -0
  69. data/sass/compass/utilities/_tables.scss +3 -0
  70. data/sass/compass/utilities/_text.scss +5 -0
  71. data/sass/compass/utilities/color/_contrast.scss +28 -0
  72. data/sass/compass/utilities/general/_clearfix.scss +44 -0
  73. data/sass/compass/utilities/general/_float.scss +30 -0
  74. data/sass/compass/utilities/general/_hacks.scss +46 -0
  75. data/sass/compass/utilities/general/_min.scss +16 -0
  76. data/sass/compass/utilities/general/_reset.scss +2 -0
  77. data/sass/compass/utilities/general/_tabs.scss +1 -0
  78. data/sass/compass/utilities/general/_tag-cloud.scss +18 -0
  79. data/sass/compass/utilities/links/_hover-link.scss +3 -0
  80. data/sass/compass/utilities/links/_link-colors.scss +3 -0
  81. data/sass/compass/utilities/links/_unstyled-link.scss +3 -0
  82. data/sass/compass/utilities/lists/_bullets.scss +3 -0
  83. data/sass/compass/utilities/lists/_horizontal-list.scss +3 -0
  84. data/sass/compass/utilities/lists/_inline-block-list.scss +3 -0
  85. data/sass/compass/utilities/lists/_inline-list.scss +3 -0
  86. data/sass/compass/utilities/sprites/_base.scss +66 -0
  87. data/sass/compass/utilities/sprites/_sprite-img.scss +79 -0
  88. data/sass/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
  89. data/sass/compass/utilities/tables/_borders.scss +33 -0
  90. data/sass/compass/utilities/tables/_scaffolding.scss +9 -0
  91. data/sass/compass/utilities/text/_ellipsis.scss +3 -0
  92. data/sass/compass/utilities/text/_nowrap.scss +3 -0
  93. data/sass/compass/utilities/text/_replacement.scss +3 -0
  94. data/simple-compass.gemspec +21 -0
  95. data/spec/fixtures/headings_test.sass +2 -0
  96. data/spec/fixtures/opacity_test.sass +7 -0
  97. data/spec/fixtures/reset_test.sass +1 -0
  98. data/spec/headings_spec.rb +9 -0
  99. data/spec/opacity_spec.rb +9 -0
  100. data/spec/reset_spec.rb +9 -0
  101. data/spec/spec_helper.rb +7 -0
  102. metadata +169 -0
@@ -0,0 +1,135 @@
1
+ // Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
2
+ // Global reset rules.
3
+ // For more specific resets, use the reset mixins provided below
4
+ //
5
+ // *Please Note*: tables still need `cellspacing="0"` in the markup.
6
+ @mixin global-reset {
7
+ html, body, div, span, applet, object, iframe,
8
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9
+ a, abbr, acronym, address, big, cite, code,
10
+ del, dfn, em, font, img, ins, kbd, q, s, samp,
11
+ small, strike, strong, sub, sup, tt, var,
12
+ dl, dt, dd, ol, ul, li,
13
+ fieldset, form, label, legend,
14
+ table, caption, tbody, tfoot, thead, tr, th, td {
15
+ @include reset-box-model;
16
+ @include reset-font; }
17
+ body {
18
+ @include reset-body; }
19
+ ol, ul {
20
+ @include reset-list-style; }
21
+ table {
22
+ @include reset-table; }
23
+ caption, th, td {
24
+ @include reset-table-cell; }
25
+ q, blockquote {
26
+ @include reset-quotation; }
27
+ a img {
28
+ @include reset-image-anchor-border; } }
29
+
30
+ // Reset all elements within some selector scope. To reset the selector itself,
31
+ // mixin the appropriate reset mixin for that element type as well. This could be
32
+ // useful if you want to style a part of your page in a dramatically different way.
33
+ //
34
+ // *Please Note*: tables still need `cellspacing="0"` in the markup.
35
+ @mixin nested-reset {
36
+ div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
37
+ pre, a, abbr, acronym, address, code, del, dfn, em, img,
38
+ dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
39
+ @include reset-box-model;
40
+ @include reset-font; }
41
+ table {
42
+ @include reset-table; }
43
+ caption, th, td {
44
+ @include reset-table-cell; }
45
+ q, blockquote {
46
+ @include reset-quotation; }
47
+ a img {
48
+ @include reset-image-anchor-border; } }
49
+
50
+ // Reset the box model measurements.
51
+ @mixin reset-box-model {
52
+ margin: 0;
53
+ padding: 0;
54
+ border: 0;
55
+ outline: 0; }
56
+
57
+ // Reset the font and vertical alignment.
58
+ @mixin reset-font {
59
+ font: {
60
+ weight: inherit;
61
+ style: inherit;
62
+ size: 100%;
63
+ family: inherit; };
64
+ vertical-align: baseline; }
65
+
66
+ // Resets the outline when focus.
67
+ // For accessibility you need to apply some styling in its place.
68
+ @mixin reset-focus {
69
+ outline: 0; }
70
+
71
+ // Reset a body element.
72
+ @mixin reset-body {
73
+ line-height: 1;
74
+ color: black;
75
+ background: white; }
76
+
77
+ // Reset the list style of an element.
78
+ @mixin reset-list-style {
79
+ list-style: none; }
80
+
81
+ // Reset a table
82
+ @mixin reset-table {
83
+ border-collapse: separate;
84
+ border-spacing: 0;
85
+ vertical-align: middle; }
86
+
87
+ // Reset a table cell (`th`, `td`)
88
+ @mixin reset-table-cell {
89
+ text-align: left;
90
+ font-weight: normal;
91
+ vertical-align: middle; }
92
+
93
+ // Reset a quotation (`q`, `blockquote`)
94
+ @mixin reset-quotation {
95
+ quotes: "" "";
96
+ &:before, &:after {
97
+ content: ""; } }
98
+
99
+ // Resets the border.
100
+ @mixin reset-image-anchor-border {
101
+ border: none; }
102
+
103
+ // Unrecognized elements are displayed inline.
104
+ // This reset provides a basic reset for html5 elements
105
+ // so they are rendered correctly in browsers that don't recognize them
106
+ // and reset in browsers that have default styles for them.
107
+ @mixin reset-html5 {
108
+ #{elements-of-type(html5-block)} {
109
+ @include reset-box-model;
110
+ display: block; } }
111
+
112
+ // Resets the display of inline and block elements to their default display
113
+ // according to their tag type. Elements that have a default display that varies across
114
+ // versions of html or browser are not handled here, but this covers the 90% use case.
115
+ // Usage Example:
116
+ //
117
+ // // Turn off the display for both of these classes
118
+ // .unregistered-only, .registered-only
119
+ // display: none
120
+ // // Now turn only one of them back on depending on some other context.
121
+ // body.registered
122
+ // +reset-display(".registered-only")
123
+ // body.unregistered
124
+ // +reset-display(".unregistered-only")
125
+ @mixin reset-display($selector: "", $important: false) {
126
+ #{append-selector(elements-of-type("inline"), $selector)} {
127
+ @if $important {
128
+ display: inline !important; }
129
+ @else {
130
+ display: inline; } }
131
+ #{append-selector(elements-of-type("block"), $selector)} {
132
+ @if $important {
133
+ display: block !important; }
134
+ @else {
135
+ display: block; } } }
@@ -0,0 +1,142 @@
1
+ // Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
2
+ // Global reset rules.
3
+ // For more specific resets, use the reset mixins provided below
4
+ @mixin global-reset {
5
+ html, body, div, span, applet, object, iframe,
6
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7
+ a, abbr, acronym, address, big, cite, code,
8
+ del, dfn, em, img, ins, kbd, q, s, samp,
9
+ small, strike, strong, sub, sup, tt, var,
10
+ b, u, i, center,
11
+ dl, dt, dd, ol, ul, li,
12
+ fieldset, form, label, legend,
13
+ table, caption, tbody, tfoot, thead, tr, th, td,
14
+ article, aside, canvas, details, embed,
15
+ figure, figcaption, footer, header, hgroup,
16
+ menu, nav, output, ruby, section, summary,
17
+ time, mark, audio, video {
18
+ @include reset-box-model;
19
+ @include reset-font; }
20
+ // Unlike Eric's original reset, we reset the html element to be compatible
21
+ // with the vertical rhythm mixins.
22
+ html {
23
+ @include reset-body; }
24
+ ol, ul {
25
+ @include reset-list-style; }
26
+ table {
27
+ @include reset-table; }
28
+ caption, th, td {
29
+ @include reset-table-cell; }
30
+ q, blockquote {
31
+ @include reset-quotation; }
32
+ a img {
33
+ @include reset-image-anchor-border; }
34
+ @include reset-html5; }
35
+
36
+ // Reset all elements within some selector scope. To reset the selector itself,
37
+ // mixin the appropriate reset mixin for that element type as well. This could be
38
+ // useful if you want to style a part of your page in a dramatically different way.
39
+ @mixin nested-reset {
40
+ div, span, applet, object, iframe,
41
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
42
+ a, abbr, acronym, address, big, cite, code,
43
+ del, dfn, em, img, ins, kbd, q, s, samp,
44
+ small, strike, strong, sub, sup, tt, var,
45
+ b, u, i, center,
46
+ dl, dt, dd, ol, ul, li,
47
+ fieldset, form, label, legend,
48
+ table, caption, tbody, tfoot, thead, tr, th, td,
49
+ article, aside, canvas, details, embed,
50
+ figure, figcaption, footer, header, hgroup,
51
+ menu, nav, output, ruby, section, summary,
52
+ time, mark, audio, video {
53
+ @include reset-box-model;
54
+ @include reset-font; }
55
+ table {
56
+ @include reset-table; }
57
+ caption, th, td {
58
+ @include reset-table-cell; }
59
+ q, blockquote {
60
+ @include reset-quotation; }
61
+ a img {
62
+ @include reset-image-anchor-border; } }
63
+
64
+ // Reset the box model measurements.
65
+ @mixin reset-box-model {
66
+ margin: 0;
67
+ padding: 0;
68
+ border: 0; }
69
+
70
+ // Reset the font and vertical alignment.
71
+ @mixin reset-font {
72
+ font: inherit;
73
+ font-size: 100%;
74
+ vertical-align: baseline; }
75
+
76
+ // Resets the outline when focus.
77
+ // For accessibility you need to apply some styling in its place.
78
+ @mixin reset-focus {
79
+ outline: 0; }
80
+
81
+ // Reset a body element.
82
+ @mixin reset-body {
83
+ line-height: 1; }
84
+
85
+ // Reset the list style of an element.
86
+ @mixin reset-list-style {
87
+ list-style: none; }
88
+
89
+ // Reset a table
90
+ @mixin reset-table {
91
+ border-collapse: collapse;
92
+ border-spacing: 0; }
93
+
94
+ // Reset a table cell (`th`, `td`)
95
+ @mixin reset-table-cell {
96
+ text-align: left;
97
+ font-weight: normal;
98
+ vertical-align: middle; }
99
+
100
+ // Reset a quotation (`q`, `blockquote`)
101
+ @mixin reset-quotation {
102
+ quotes: none;
103
+ &:before, &:after {
104
+ content: "";
105
+ content: none; } }
106
+
107
+ // Resets the border.
108
+ @mixin reset-image-anchor-border {
109
+ border: none; }
110
+
111
+ // Unrecognized elements are displayed inline.
112
+ // This reset provides a basic reset for block html5 elements
113
+ // so they are rendered correctly in browsers that don't recognize them
114
+ // and reset in browsers that have default styles for them.
115
+ @mixin reset-html5 {
116
+ #{elements-of-type(html5-block)} {
117
+ display: block; } }
118
+
119
+ // Resets the display of inline and block elements to their default display
120
+ // according to their tag type. Elements that have a default display that varies across
121
+ // versions of html or browser are not handled here, but this covers the 90% use case.
122
+ // Usage Example:
123
+ //
124
+ // // Turn off the display for both of these classes
125
+ // .unregistered-only, .registered-only
126
+ // display: none
127
+ // // Now turn only one of them back on depending on some other context.
128
+ // body.registered
129
+ // +reset-display(".registered-only")
130
+ // body.unregistered
131
+ // +reset-display(".unregistered-only")
132
+ @mixin reset-display($selector: "", $important: false) {
133
+ #{append-selector(elements-of-type("inline"), $selector)} {
134
+ @if $important {
135
+ display: inline !important; }
136
+ @else {
137
+ display: inline; } }
138
+ #{append-selector(elements-of-type("block"), $selector)} {
139
+ @if $important {
140
+ display: block !important; }
141
+ @else {
142
+ display: block; } } }
@@ -0,0 +1,3 @@
1
+ @import "links/hover-link";
2
+ @import "links/link-colors";
3
+ @import "links/unstyled-link";
@@ -0,0 +1,4 @@
1
+ @import "lists/horizontal-list";
2
+ @import "lists/inline-list";
3
+ @import "lists/inline-block-list";
4
+ @import "lists/bullets";
@@ -0,0 +1,4 @@
1
+ @import "text/ellipsis";
2
+ @import "text/nowrap";
3
+ @import "text/replacement";
4
+ @import "text/force-wrap";
@@ -0,0 +1,221 @@
1
+ @import "compass/layout/grid-background";
2
+
3
+ // The base font size.
4
+ $base-font-size: 16px !default;
5
+
6
+ // The base line height determines the basic unit of vertical rhythm.
7
+ $base-line-height: 24px !default;
8
+
9
+ // Set the default border style for rhythm borders.
10
+ $default-rhythm-border-style: solid !default;
11
+
12
+ // The default font size in all browsers.
13
+ $browser-default-font-size: 16px;
14
+
15
+ // Set to false if you want to use absolute pixels in sizing your typography.
16
+ $relative-font-sizing: true !default;
17
+
18
+ // Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
19
+ // to round the line height to the nearest half line height instead of the
20
+ // nearest integral line height to avoid large spacing between lines.
21
+ $round-to-nearest-half-line: false !default;
22
+
23
+ // Ensure there is at least this many pixels
24
+ // of vertical padding above and below the text.
25
+ $min-line-padding: 2px !default;
26
+
27
+ // $base-font-size but in your output unit of choice.
28
+ // Defaults to 1em when `$relative-font-sizing` is true.
29
+ $font-unit: if($relative-font-sizing, 1em, $base-font-size) !default;
30
+
31
+ // The basic unit of font rhythm.
32
+ $base-rhythm-unit: $base-line-height / $base-font-size * $font-unit;
33
+
34
+ // The leader is the amount of whitespace in a line.
35
+ // It might be useful in your calculations.
36
+ $base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size;
37
+
38
+ // The half-leader is the amount of whitespace above and below a line.
39
+ // It might be useful in your calculations.
40
+ $base-half-leader: $base-leader / 2;
41
+
42
+ // True if a number has a relative unit.
43
+ @function relative-unit($number) {
44
+ @return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem"
45
+ }
46
+
47
+ // True if a number has an absolute unit.
48
+ @function absolute-unit($number) {
49
+ @return not (relative-unit($number) or unitless($number));
50
+ }
51
+
52
+ @if $relative-font-sizing and not relative-unit($font-unit) {
53
+ @warn "$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit.";
54
+ }
55
+
56
+ // Establishes a font baseline for the given font-size.
57
+ @mixin establish-baseline($font-size: $base-font-size) {
58
+ // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
59
+ // whose root is set in ems. So we set the root font size in percentages of
60
+ // the default font size.
61
+ * html {
62
+ font-size: 100% * ($font-size / $browser-default-font-size);
63
+ }
64
+ html {
65
+ font-size: $font-size;
66
+ @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
67
+ }
68
+ }
69
+
70
+ // Resets the line-height to 1 vertical rhythm unit.
71
+ // Does not work on elements whose font-size is different from $base-font-size.
72
+ //
73
+ // @deprecated This mixin will be removed in the next release.
74
+ // Please use the `adjust-leading-to` mixin instead.
75
+ @mixin reset-baseline {
76
+ @include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));
77
+ }
78
+
79
+ // Show a background image that can be used to debug your alignments.
80
+ // Include the $img argument if you would rather use your own image than the
81
+ // Compass default gradient image.
82
+ @mixin debug-vertical-alignment($img: false) {
83
+ @if $img {
84
+ background: image-url($img);
85
+ } @else {
86
+ @include baseline-grid-background($base-rhythm-unit);
87
+ }
88
+ }
89
+
90
+ // Adjust a block to have a different font size and line height to maintain the
91
+ // rhythm. $lines specifies how many multiples of the baseline rhythm each line
92
+ // of this font should use up. It does not have to be an integer, but it
93
+ // defaults to the smallest integer that is large enough to fit the font.
94
+ // Use $from-size to adjust from a font-size other than the base font-size.
95
+ @mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
96
+ @if not $relative-font-sizing and $from-size != $base-font-size {
97
+ @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
98
+ }
99
+ font-size: $font-unit * $to-size / $from-size;
100
+ @include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size));
101
+ }
102
+
103
+ // Adjust a block to have different line height to maintain the rhythm.
104
+ // $lines specifies how many multiples of the baseline rhythm each line of this
105
+ // font should use up. It does not have to be an integer, but it defaults to the
106
+ // smallest integer that is large enough to fit the font.
107
+ @mixin adjust-leading-to($lines, $font-size: $base-font-size) {
108
+ line-height: rhythm($lines, $font-size);
109
+ }
110
+
111
+ // Calculate rhythm units.
112
+ @function rhythm(
113
+ $lines: 1,
114
+ $font-size: $base-font-size,
115
+ $offset: 0
116
+ ) {
117
+ @if not $relative-font-sizing and $font-size != $base-font-size {
118
+ @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
119
+ }
120
+ $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;
121
+ // Round the pixels down to nearest integer.
122
+ @if unit($rhythm) == px {
123
+ $rhythm: floor($rhythm);
124
+ }
125
+ @return $rhythm;
126
+ }
127
+
128
+ // Calculate the minimum multiple of rhythm units needed to contain the font-size.
129
+ @function lines-for-font-size($font-size) {
130
+ $lines: if($round-to-nearest-half-line,
131
+ ceil(2 * $font-size / $base-line-height) / 2,
132
+ ceil($font-size / $base-line-height));
133
+ @if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
134
+ $lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
135
+ }
136
+ @return $lines;
137
+ }
138
+
139
+ // Apply leading whitespace. The $property can be margin or padding.
140
+ @mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
141
+ #{$property}-top: rhythm($lines, $font-size);
142
+ }
143
+
144
+ // Apply leading whitespace as padding.
145
+ @mixin padding-leader($lines: 1, $font-size: $base-font-size) {
146
+ padding-top: rhythm($lines, $font-size);
147
+ }
148
+
149
+ // Apply leading whitespace as margin.
150
+ @mixin margin-leader($lines: 1, $font-size: $base-font-size) {
151
+ margin-top: rhythm($lines, $font-size);
152
+ }
153
+
154
+ // Apply trailing whitespace. The $property can be margin or padding.
155
+ @mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
156
+ #{$property}-bottom: rhythm($lines, $font-size);
157
+ }
158
+
159
+ // Apply trailing whitespace as padding.
160
+ @mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
161
+ padding-bottom: rhythm($lines, $font-size);
162
+ }
163
+
164
+ // Apply trailing whitespace as margin.
165
+ @mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
166
+ margin-bottom: rhythm($lines, $font-size);
167
+ }
168
+
169
+ // Shorthand mixin to apply whitespace for top and bottom margins and padding.
170
+ @mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
171
+ @include leader($leader, $font-size);
172
+ @include padding-leader($padding-leader, $font-size);
173
+ @include padding-trailer($padding-trailer, $font-size);
174
+ @include trailer($trailer, $font-size);
175
+ }
176
+
177
+ // Apply a border and whitespace to any side without destroying the vertical
178
+ // rhythm. The whitespace must be greater than the width of the border.
179
+ @mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
180
+ @if not $relative-font-sizing and $font-size != $base-font-size {
181
+ @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border";
182
+ }
183
+ border-#{$side}: {
184
+ style: $border-style;
185
+ width: $font-unit * $width / $font-size;
186
+ };
187
+ padding-#{$side}: rhythm($lines, $font-size, $offset: $width);
188
+ }
189
+
190
+ // Apply borders and whitespace equally to all sides.
191
+ @mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
192
+ @if not $relative-font-sizing and $font-size != $base-font-size {
193
+ @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders";
194
+ }
195
+ border: {
196
+ style: $border-style;
197
+ width: $font-unit * $width / $font-size;
198
+ };
199
+ padding: rhythm($lines, $font-size, $offset: $width);
200
+ }
201
+
202
+ // Apply a leading border.
203
+ @mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
204
+ @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
205
+ }
206
+
207
+ // Apply a trailing border.
208
+ @mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
209
+ @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
210
+ }
211
+
212
+ // Apply both leading and trailing borders.
213
+ @mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
214
+ @include leading-border($width, $lines, $font-size, $border-style);
215
+ @include trailing-border($width, $lines, $font-size, $border-style);
216
+ }
217
+
218
+ // Alias for `horizontal-borders` mixin.
219
+ @mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
220
+ @include horizontal-borders($width, $lines, $font-size, $border-style);
221
+ }