compass-core 1.0.0.alpha.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +22 -0
- data/VERSION +1 -0
- data/data/caniuse.json +1 -0
- data/data/caniuse_extras/css-placeholder.json +171 -0
- data/lib/compass-core.rb +1 -0
- data/lib/compass/browser_support.rb +62 -0
- data/lib/compass/configuration.rb +168 -0
- data/lib/compass/configuration/data.rb +178 -0
- data/lib/compass/configuration/defaults.rb +197 -0
- data/lib/compass/configuration/inheritance.rb +304 -0
- data/lib/compass/configuration/paths.rb +19 -0
- data/lib/compass/core.rb +64 -0
- data/lib/compass/core/caniuse.rb +282 -0
- data/lib/compass/core/sass_extensions.rb +10 -0
- data/lib/compass/core/sass_extensions/functions.rb +39 -0
- data/lib/compass/core/sass_extensions/functions/colors.rb +67 -0
- data/lib/compass/core/sass_extensions/functions/configuration.rb +162 -0
- data/lib/compass/core/sass_extensions/functions/constants.rb +74 -0
- data/lib/compass/core/sass_extensions/functions/cross_browser_support.rb +269 -0
- data/lib/compass/core/sass_extensions/functions/display.rb +32 -0
- data/lib/compass/core/sass_extensions/functions/enumerate.rb +7 -0
- data/lib/compass/core/sass_extensions/functions/env.rb +60 -0
- data/lib/compass/core/sass_extensions/functions/font_files.rb +41 -0
- data/lib/compass/core/sass_extensions/functions/gradient_support.rb +616 -0
- data/lib/compass/core/sass_extensions/functions/image_size.rb +117 -0
- data/lib/compass/core/sass_extensions/functions/inline_image.rb +64 -0
- data/lib/compass/core/sass_extensions/functions/lists.rb +101 -0
- data/lib/compass/core/sass_extensions/functions/math.rb +92 -0
- data/lib/compass/core/sass_extensions/functions/selectors.rb +64 -0
- data/lib/compass/core/sass_extensions/functions/urls.rb +297 -0
- data/lib/compass/core/sass_extensions/monkey_patches.rb +3 -0
- data/lib/compass/core/sass_extensions/monkey_patches/browser_support.rb +118 -0
- data/lib/compass/core/sass_extensions/monkey_patches/traversal.rb +23 -0
- data/lib/compass/core/version.rb +5 -0
- data/lib/compass/error.rb +5 -0
- data/stylesheets/_compass.scss +3 -0
- data/stylesheets/_lemonade.scss +38 -0
- data/stylesheets/compass/_configuration.scss +54 -0
- data/stylesheets/compass/_css3.scss +21 -0
- data/stylesheets/compass/_layout.scss +3 -0
- data/stylesheets/compass/_reset-legacy.scss +3 -0
- data/stylesheets/compass/_reset.scss +3 -0
- data/stylesheets/compass/_support.scss +441 -0
- data/stylesheets/compass/_typography.scss +4 -0
- data/stylesheets/compass/_utilities.scss +9 -0
- data/stylesheets/compass/css3/_animation.scss +122 -0
- data/stylesheets/compass/css3/_appearance.scss +17 -0
- data/stylesheets/compass/css3/_background-clip.scss +35 -0
- data/stylesheets/compass/css3/_background-origin.scss +37 -0
- data/stylesheets/compass/css3/_background-size.scss +19 -0
- data/stylesheets/compass/css3/_border-radius.scss +107 -0
- data/stylesheets/compass/css3/_box-shadow.scss +88 -0
- data/stylesheets/compass/css3/_box-sizing.scss +15 -0
- data/stylesheets/compass/css3/_box.scss +85 -0
- data/stylesheets/compass/css3/_columns.scss +210 -0
- data/stylesheets/compass/css3/_deprecated-support.scss +272 -0
- data/stylesheets/compass/css3/_filter.scss +50 -0
- data/stylesheets/compass/css3/_flexbox.scss +156 -0
- data/stylesheets/compass/css3/_font-face.scss +48 -0
- data/stylesheets/compass/css3/_hyphenation.scss +71 -0
- data/stylesheets/compass/css3/_images.scss +139 -0
- data/stylesheets/compass/css3/_inline-block.scss +31 -0
- data/stylesheets/compass/css3/_opacity.scss +23 -0
- data/stylesheets/compass/css3/_pie.scss +1 -0
- data/stylesheets/compass/css3/_regions.scss +27 -0
- data/stylesheets/compass/css3/_selection.scss +59 -0
- data/stylesheets/compass/css3/_shared.scss +5 -0
- data/stylesheets/compass/css3/_text-shadow.scss +82 -0
- data/stylesheets/compass/css3/_transform.scss +590 -0
- data/stylesheets/compass/css3/_transition.scss +171 -0
- data/stylesheets/compass/css3/_user-interface.scss +71 -0
- data/stylesheets/compass/layout/_grid-background.scss +178 -0
- data/stylesheets/compass/layout/_sticky-footer.scss +23 -0
- data/stylesheets/compass/layout/_stretching.scss +24 -0
- data/stylesheets/compass/reset/_utilities-legacy.scss +135 -0
- data/stylesheets/compass/reset/_utilities.scss +142 -0
- data/stylesheets/compass/typography/_links.scss +3 -0
- data/stylesheets/compass/typography/_lists.scss +4 -0
- data/stylesheets/compass/typography/_text.scss +4 -0
- data/stylesheets/compass/typography/_units.scss +152 -0
- data/stylesheets/compass/typography/_vertical_rhythm.scss +300 -0
- data/stylesheets/compass/typography/links/_hover-link.scss +5 -0
- data/stylesheets/compass/typography/links/_link-colors.scss +28 -0
- data/stylesheets/compass/typography/links/_unstyled-link.scss +7 -0
- data/stylesheets/compass/typography/lists/_bullets.scss +34 -0
- data/stylesheets/compass/typography/lists/_horizontal-list.scss +63 -0
- data/stylesheets/compass/typography/lists/_inline-block-list.scss +50 -0
- data/stylesheets/compass/typography/lists/_inline-list.scss +47 -0
- data/stylesheets/compass/typography/text/_ellipsis.scss +25 -0
- data/stylesheets/compass/typography/text/_force-wrap.scss +12 -0
- data/stylesheets/compass/typography/text/_nowrap.scss +2 -0
- data/stylesheets/compass/typography/text/_replacement.scss +68 -0
- data/stylesheets/compass/utilities/_color.scss +1 -0
- data/stylesheets/compass/utilities/_general.scss +6 -0
- data/stylesheets/compass/utilities/_links.scss +5 -0
- data/stylesheets/compass/utilities/_lists.scss +6 -0
- data/stylesheets/compass/utilities/_print.scss +17 -0
- data/stylesheets/compass/utilities/_sass.scss +2 -0
- data/stylesheets/compass/utilities/_sprites.scss +2 -0
- data/stylesheets/compass/utilities/_tables.scss +3 -0
- data/stylesheets/compass/utilities/_text.scss +5 -0
- data/stylesheets/compass/utilities/color/_brightness.scss +12 -0
- data/stylesheets/compass/utilities/color/_contrast.scss +52 -0
- data/stylesheets/compass/utilities/general/_clearfix.scss +44 -0
- data/stylesheets/compass/utilities/general/_float.scss +38 -0
- data/stylesheets/compass/utilities/general/_hacks.scss +65 -0
- data/stylesheets/compass/utilities/general/_min.scss +16 -0
- data/stylesheets/compass/utilities/general/_reset.scss +2 -0
- data/stylesheets/compass/utilities/general/_tabs.scss +1 -0
- data/stylesheets/compass/utilities/general/_tag-cloud.scss +18 -0
- data/stylesheets/compass/utilities/links/_hover-link.scss +3 -0
- data/stylesheets/compass/utilities/links/_link-colors.scss +3 -0
- data/stylesheets/compass/utilities/links/_unstyled-link.scss +3 -0
- data/stylesheets/compass/utilities/lists/_bullets.scss +3 -0
- data/stylesheets/compass/utilities/lists/_horizontal-list.scss +3 -0
- data/stylesheets/compass/utilities/lists/_inline-block-list.scss +3 -0
- data/stylesheets/compass/utilities/lists/_inline-list.scss +3 -0
- data/stylesheets/compass/utilities/sass/_lists.scss +16 -0
- data/stylesheets/compass/utilities/sass/_maps.scss +19 -0
- data/stylesheets/compass/utilities/sprites/_base.scss +92 -0
- data/stylesheets/compass/utilities/sprites/_sprite-img.scss +81 -0
- data/stylesheets/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
- data/stylesheets/compass/utilities/tables/_borders.scss +38 -0
- data/stylesheets/compass/utilities/tables/_scaffolding.scss +9 -0
- data/stylesheets/compass/utilities/text/_ellipsis.scss +3 -0
- data/stylesheets/compass/utilities/text/_nowrap.scss +3 -0
- data/stylesheets/compass/utilities/text/_replacement.scss +3 -0
- data/templates/ellipsis/ellipsis.sass +9 -0
- data/templates/ellipsis/manifest.rb +27 -0
- data/templates/ellipsis/xml/ellipsis.xml +14 -0
- data/templates/extension/manifest.rb +26 -0
- data/templates/extension/stylesheets/main.sass +1 -0
- data/templates/extension/templates/project/manifest.rb +2 -0
- data/templates/extension/templates/project/screen.sass +2 -0
- data/templates/project/USAGE.markdown +32 -0
- data/templates/project/ie.sass +6 -0
- data/templates/project/manifest.rb +4 -0
- data/templates/project/print.sass +6 -0
- data/templates/project/screen.sass +7 -0
- metadata +241 -0
@@ -0,0 +1,28 @@
|
|
1
|
+
// Set all the colors for a link with one mixin call.
|
2
|
+
// Order of arguments is:
|
3
|
+
//
|
4
|
+
// 1. normal
|
5
|
+
// 2. hover
|
6
|
+
// 3. active
|
7
|
+
// 4. visited
|
8
|
+
// 5. focus
|
9
|
+
//
|
10
|
+
// Those states not specified will inherit.
|
11
|
+
// Mixin to an anchor link like so:
|
12
|
+
// a
|
13
|
+
// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
|
14
|
+
|
15
|
+
@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
|
16
|
+
color: $normal;
|
17
|
+
@if $visited {
|
18
|
+
&:visited {
|
19
|
+
color: $visited; } }
|
20
|
+
@if $focus {
|
21
|
+
&:focus {
|
22
|
+
color: $focus; } }
|
23
|
+
@if $hover {
|
24
|
+
&:hover {
|
25
|
+
color: $hover; } }
|
26
|
+
@if $active {
|
27
|
+
&:active {
|
28
|
+
color: $active; } } }
|
@@ -0,0 +1,34 @@
|
|
1
|
+
// Turn off the bullet for an element of a list
|
2
|
+
@mixin no-bullet {
|
3
|
+
list-style-image : none;
|
4
|
+
list-style-type : none;
|
5
|
+
margin-left : 0;
|
6
|
+
}
|
7
|
+
|
8
|
+
// turns off the bullets for an entire list
|
9
|
+
@mixin no-bullets {
|
10
|
+
list-style: none;
|
11
|
+
li { @include no-bullet; }
|
12
|
+
}
|
13
|
+
|
14
|
+
// Make a list(ul/ol) have an image bullet.
|
15
|
+
//
|
16
|
+
// The mixin should be used like this for an icon that is 5x7:
|
17
|
+
//
|
18
|
+
// ul.pretty
|
19
|
+
// +pretty-bullets("my-icon.png", 5px, 7px)
|
20
|
+
//
|
21
|
+
// Additionally, if the image dimensions are not provided,
|
22
|
+
// The image dimensions will be extracted from the image itself.
|
23
|
+
//
|
24
|
+
// ul.pretty
|
25
|
+
// +pretty-bullets("my-icon.png")
|
26
|
+
//
|
27
|
+
@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
|
28
|
+
margin-left: 0;
|
29
|
+
li {
|
30
|
+
padding-left: $padding;
|
31
|
+
background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
|
32
|
+
list-style-type: none;
|
33
|
+
}
|
34
|
+
}
|
@@ -0,0 +1,63 @@
|
|
1
|
+
// Horizontal list layout module.
|
2
|
+
//
|
3
|
+
// Easy mode using simple descendant li selectors:
|
4
|
+
//
|
5
|
+
// ul.nav
|
6
|
+
// +horizontal-list
|
7
|
+
//
|
8
|
+
// Advanced mode:
|
9
|
+
// If you need to target the list items using a different selector then use
|
10
|
+
// +horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
|
11
|
+
// This may help when working on layouts involving nested lists. For example:
|
12
|
+
//
|
13
|
+
// ul.nav
|
14
|
+
// +horizontal-list-container
|
15
|
+
// > li
|
16
|
+
// +horizontal-list-item
|
17
|
+
|
18
|
+
@import "bullets";
|
19
|
+
@import "compass/utilities/general/clearfix";
|
20
|
+
@import "compass/utilities/general/reset";
|
21
|
+
@import "compass/utilities/general/float";
|
22
|
+
@import "compass/support";
|
23
|
+
|
24
|
+
// Can be mixed into any selector that target a ul or ol that is meant
|
25
|
+
// to have a horizontal layout. Used to implement +horizontal-list.
|
26
|
+
@mixin horizontal-list-container {
|
27
|
+
@include reset-box-model;
|
28
|
+
@include clearfix; }
|
29
|
+
|
30
|
+
// Can be mixed into any li selector that is meant to participate in a horizontal layout.
|
31
|
+
// Used to implement +horizontal-list.
|
32
|
+
//
|
33
|
+
// :last-child is not fully supported
|
34
|
+
// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
|
35
|
+
//
|
36
|
+
// IE8 ignores rules that are included on the same line as :last-child
|
37
|
+
// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
|
38
|
+
//
|
39
|
+
// Setting `$padding` to `false` disables the padding between list elements
|
40
|
+
@mixin horizontal-list-item($padding: 4px, $direction: left) {
|
41
|
+
@include no-bullet;
|
42
|
+
white-space: nowrap;
|
43
|
+
@include float($direction);
|
44
|
+
@if $padding {
|
45
|
+
padding: {
|
46
|
+
left: $padding;
|
47
|
+
right: $padding;
|
48
|
+
}
|
49
|
+
&:first-child #{if(support-legacy-browser("ie", "6", $threshold: $css-sel2-support-threshold), ', &.first', '')} { padding-#{$direction}: 0; }
|
50
|
+
&:last-child { padding-#{opposite-position($direction)}: 0; }
|
51
|
+
@if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold) {
|
52
|
+
&.last { padding-#{opposite-position($direction)}: 0; } }
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
|
57
|
+
// This is not an inline list.
|
58
|
+
//
|
59
|
+
// Setting `$padding` to `false` disables the padding between list elements
|
60
|
+
@mixin horizontal-list($padding: 4px, $direction: left) {
|
61
|
+
@include horizontal-list-container;
|
62
|
+
li {
|
63
|
+
@include horizontal-list-item($padding, $direction); } }
|
@@ -0,0 +1,50 @@
|
|
1
|
+
// Inline-Block list layout module.
|
2
|
+
//
|
3
|
+
// Easy mode using simple descendant li selectors:
|
4
|
+
//
|
5
|
+
// ul.nav {
|
6
|
+
// @import inline-block-list;
|
7
|
+
// }
|
8
|
+
//
|
9
|
+
// Advanced mode:
|
10
|
+
// If you need to target the list items using a different selector then use
|
11
|
+
// `@include inline-block-list-container` on your ul/ol and
|
12
|
+
// `@include inline-block-list-item` on your li. This may help when working
|
13
|
+
// on layouts involving nested lists. For example:
|
14
|
+
//
|
15
|
+
// ul.nav {
|
16
|
+
// @include inline-block-list-container;
|
17
|
+
// > li {
|
18
|
+
// @include inline-block-list-item;
|
19
|
+
// }
|
20
|
+
// }
|
21
|
+
|
22
|
+
@import "bullets";
|
23
|
+
@import "horizontal-list";
|
24
|
+
@import "compass/utilities/general/float";
|
25
|
+
@import "compass/css3/inline-block";
|
26
|
+
|
27
|
+
// Can be mixed into any selector that target a ul or ol that is meant
|
28
|
+
// to have an inline-block layout. Used to implement `inline-block-list`.
|
29
|
+
@mixin inline-block-list-container {
|
30
|
+
@include horizontal-list-container; }
|
31
|
+
|
32
|
+
// Can be mixed into any li selector that is meant to participate in a horizontal layout.
|
33
|
+
// Used to implement `inline-block-list`.
|
34
|
+
@mixin inline-block-list-item($padding: false) {
|
35
|
+
@include no-bullet;
|
36
|
+
@include inline-block;
|
37
|
+
white-space: nowrap;
|
38
|
+
@if $padding {
|
39
|
+
padding: {
|
40
|
+
left: $padding;
|
41
|
+
right: $padding;
|
42
|
+
};
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
// A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap.
|
47
|
+
@mixin inline-block-list($padding: false) {
|
48
|
+
@include inline-block-list-container;
|
49
|
+
li {
|
50
|
+
@include inline-block-list-item($padding); } }
|
@@ -0,0 +1,47 @@
|
|
1
|
+
@import "compass/support";
|
2
|
+
|
3
|
+
// makes a list inline.
|
4
|
+
@mixin inline-list {
|
5
|
+
list-style-type: none;
|
6
|
+
&, & li {
|
7
|
+
margin: 0px;
|
8
|
+
padding: 0px;
|
9
|
+
display: inline;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
// makes an inline list delimited with the passed string.
|
14
|
+
// Defaults to making a comma-separated list.
|
15
|
+
//
|
16
|
+
// Please make note of the browser support issues before using this mixin:
|
17
|
+
//
|
18
|
+
// use of `content` and `:after` is not fully supported in all browsers.
|
19
|
+
// See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15)
|
20
|
+
//
|
21
|
+
// `:last-child` is not fully supported.
|
22
|
+
// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29).
|
23
|
+
//
|
24
|
+
// IE8 ignores rules that are included on the same line as :last-child
|
25
|
+
// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
|
26
|
+
|
27
|
+
@mixin delimited-list($separator: ", ") {
|
28
|
+
@include inline-list;
|
29
|
+
li {
|
30
|
+
&:after { content: $separator; }
|
31
|
+
&:last-child {
|
32
|
+
&:after { content: ""; }
|
33
|
+
}
|
34
|
+
@if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold) {
|
35
|
+
&.last {
|
36
|
+
&:after { content: ""; }
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// See [delimited-list](#mixin-delimited-list)
|
43
|
+
// @deprecated
|
44
|
+
@mixin comma-delimited-list {
|
45
|
+
@warn "comma-delimited-list is deprecated. Please use delimited-list instead.";
|
46
|
+
@include delimited-list;
|
47
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@import "compass/css3/deprecated-support";
|
2
|
+
|
3
|
+
// To get full firefox support, you must install the ellipsis pattern:
|
4
|
+
//
|
5
|
+
// compass install compass/ellipsis
|
6
|
+
$use-mozilla-ellipsis-binding: false !default;
|
7
|
+
|
8
|
+
// This technique, by [Justin Maxwell](http://code404.com/), was originally
|
9
|
+
// published [here](http://mattsnider.com/css/css-string-truncation-with-ellipsis/).
|
10
|
+
// Firefox implementation by [Rikkert Koppes](http://www.rikkertkoppes.com/thoughts/2008/6/).
|
11
|
+
@mixin ellipsis($no-wrap: true) {
|
12
|
+
@if $no-wrap { white-space: nowrap; }
|
13
|
+
overflow: hidden;
|
14
|
+
@include experimental(text-overflow, ellipsis,
|
15
|
+
not -moz,
|
16
|
+
not -webkit,
|
17
|
+
-o,
|
18
|
+
-ms,
|
19
|
+
not -khtml,
|
20
|
+
official
|
21
|
+
);
|
22
|
+
@if $legacy-support-for-mozilla and $use-mozilla-ellipsis-binding {
|
23
|
+
-moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"));
|
24
|
+
}
|
25
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
// Prevent long urls and text from breaking layouts
|
2
|
+
// [originally from perishablepress.com](http://perishablepress.com/press/2010/06/01/wrapping-content/)
|
3
|
+
@mixin force-wrap {
|
4
|
+
white-space: pre; // CSS 2.0
|
5
|
+
white-space: pre-wrap; // CSS 2.1
|
6
|
+
white-space: pre-line; // CSS 3.0
|
7
|
+
white-space: -pre-wrap; // Opera 4-6
|
8
|
+
white-space: -o-pre-wrap; // Opera 7
|
9
|
+
white-space: -moz-pre-wrap; // Mozilla
|
10
|
+
white-space: -hp-pre-wrap; // HP Printers
|
11
|
+
word-wrap: break-word; // IE 5+
|
12
|
+
}
|
@@ -0,0 +1,68 @@
|
|
1
|
+
// Indicates the direction you prefer to move your text
|
2
|
+
// when hiding it.
|
3
|
+
//
|
4
|
+
// `left` is more robust, especially in older browsers.
|
5
|
+
// `right` seems have better runtime performance.
|
6
|
+
$hide-text-direction: left !default;
|
7
|
+
|
8
|
+
// Hides html text and replaces it with an image.
|
9
|
+
// If you use this on an inline element, you will need to change the display to block or inline-block.
|
10
|
+
// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
|
11
|
+
//
|
12
|
+
// Parameters:
|
13
|
+
//
|
14
|
+
// * `img` -- the relative path from the project image directory to the image, or a url literal.
|
15
|
+
// * `x` -- the x position of the background image.
|
16
|
+
// * `y` -- the y position of the background image.
|
17
|
+
@mixin replace-text($img, $x: 50%, $y: 50%) {
|
18
|
+
@include hide-text;
|
19
|
+
background: {
|
20
|
+
@if is-url($img) {
|
21
|
+
image: $img;
|
22
|
+
} @else {
|
23
|
+
image: image-url($img);
|
24
|
+
}
|
25
|
+
repeat: no-repeat;
|
26
|
+
position: $x $y;
|
27
|
+
};
|
28
|
+
}
|
29
|
+
|
30
|
+
// Like the `replace-text` mixin, but also sets the width
|
31
|
+
// and height of the element according the dimensions of the image.
|
32
|
+
//
|
33
|
+
// If you set `$inline` to true, then an inline image (data uri) will be used.
|
34
|
+
@mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%, $inline: false) {
|
35
|
+
@include replace-text(if($inline, inline-image($img), $img), $x, $y);
|
36
|
+
width: image-width($img);
|
37
|
+
height: image-height($img);
|
38
|
+
}
|
39
|
+
|
40
|
+
// Hides text in an element so you can see the background.
|
41
|
+
//
|
42
|
+
// The direction indicates how the text should be moved out of view.
|
43
|
+
//
|
44
|
+
// See `$hide-text-direction` for more information and to set this globally
|
45
|
+
// for your application.
|
46
|
+
@mixin hide-text($direction: $hide-text-direction) {
|
47
|
+
@if $direction == left {
|
48
|
+
$approximate-em-value: 12px / 1em;
|
49
|
+
$wider-than-any-screen: -9999em;
|
50
|
+
text-indent: $wider-than-any-screen * $approximate-em-value;
|
51
|
+
overflow: hidden;
|
52
|
+
text-align: left;
|
53
|
+
} @else {
|
54
|
+
// slightly wider than the box prevents issues with inline-block elements
|
55
|
+
text-indent: 110%;
|
56
|
+
white-space: nowrap;
|
57
|
+
overflow: hidden;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
// Hides text in an element by squishing the text into oblivion.
|
62
|
+
// Use this if you need to hide text contained in an inline element
|
63
|
+
// but still have it read by a screen reader.
|
64
|
+
@mixin squish-text {
|
65
|
+
font: 0/0 serif;
|
66
|
+
text-shadow: none;
|
67
|
+
color: transparent;
|
68
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
@import "color/contrast";
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// Classes that are useful for controlling what gets printed.
|
2
|
+
// You must mix `+print-utilities` into your print stylesheet
|
3
|
+
// and `+print-utilities(screen)` into your screen stylesheet.
|
4
|
+
// Note: these aren't semantic.
|
5
|
+
@mixin print-utilities($media: print) {
|
6
|
+
@if $media == print {
|
7
|
+
.noprint, .no-print { display: none; }
|
8
|
+
#{elements-of-type(block)} {
|
9
|
+
&.print-only { display: block; }
|
10
|
+
}
|
11
|
+
#{elements-of-type(inline)} {
|
12
|
+
&.print-only { display: inline; }
|
13
|
+
}
|
14
|
+
} @else {
|
15
|
+
.print-only { display: none; }
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
// Computes the "brightness" of a color
|
2
|
+
//
|
3
|
+
// Brightness is similiar to lightness in HSL but more closely approximates
|
4
|
+
// how humans perceive the intensity of the different RGB components of
|
5
|
+
// a color. Brightness is sometimes called luminance.
|
6
|
+
//
|
7
|
+
// Returns a number between 0% and 100%, where 100% is fully bright
|
8
|
+
// (white) and 0% is fully dark (black).
|
9
|
+
@function brightness($color) {
|
10
|
+
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
|
11
|
+
}
|
12
|
+
|
@@ -0,0 +1,52 @@
|
|
1
|
+
@import "compass/utilities/color/brightness";
|
2
|
+
|
3
|
+
$contrasted-dark-default: #000 !default;
|
4
|
+
$contrasted-light-default: #fff !default;
|
5
|
+
|
6
|
+
// Returns either the `$light` or `$dark` color
|
7
|
+
// by deciding which contrasts more with `$color`.
|
8
|
+
//
|
9
|
+
// E.g. This can be used to select the more readable foreground color
|
10
|
+
// for a given background color.
|
11
|
+
//
|
12
|
+
// `$dark` defaults to black and `$light` defaults to white.
|
13
|
+
//
|
14
|
+
// When `$color` is `null`, this function returns `null`.
|
15
|
+
@function contrast-color(
|
16
|
+
$color,
|
17
|
+
$dark: $contrasted-dark-default,
|
18
|
+
$light: $contrasted-light-default,
|
19
|
+
$threshold: null
|
20
|
+
) {
|
21
|
+
@if $threshold {
|
22
|
+
// Deprecated in Compass 0.13
|
23
|
+
@warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."
|
24
|
+
}
|
25
|
+
@if $color == null {
|
26
|
+
@return null;
|
27
|
+
}
|
28
|
+
@else {
|
29
|
+
$color-brightness: brightness($color);
|
30
|
+
$dark-text-brightness: brightness($dark);
|
31
|
+
$light-text-brightness: brightness($light);
|
32
|
+
|
33
|
+
@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
// Sets the specified background color and calculates a dark or light
|
38
|
+
// contrasted text color. The arguments are passed through to the
|
39
|
+
// [contrast-color function](#function-contrast-color).
|
40
|
+
@mixin contrasted(
|
41
|
+
$background-color,
|
42
|
+
$dark: $contrasted-dark-default,
|
43
|
+
$light: $contrasted-light-default,
|
44
|
+
$threshold: null
|
45
|
+
) {
|
46
|
+
@if $threshold {
|
47
|
+
// Deprecated in Compass 0.13
|
48
|
+
@warn "The $threshold argment to contrasted is no longer needed and will be removed in the next release."
|
49
|
+
}
|
50
|
+
background-color: $background-color;
|
51
|
+
color: contrast-color($background-color, $dark, $light);
|
52
|
+
}
|