├── .gitignore ├── .travis.yml ├── LICENSE.markdown ├── LICENSE_backup.md ├── README.markdown ├── bower.json ├── lib ├── _animate.scss ├── _compass.scss ├── _lemonade.scss ├── animation │ ├── _animate.scss │ ├── _core.scss │ ├── _shared.scss │ └── animate │ │ ├── _attention-seekers.scss │ │ ├── _bouncing.scss │ │ ├── _classes.scss │ │ ├── _fading.scss │ │ ├── _flippers.scss │ │ ├── _lightspeed.scss │ │ ├── _rotating.scss │ │ ├── _specials.scss │ │ ├── bouncing │ │ ├── _bouncing-entrances.scss │ │ └── _bouncing-exits.scss │ │ ├── fading │ │ ├── _fading-entrances.scss │ │ └── _fading-exits.scss │ │ └── rotating │ │ ├── _rotating-entrances.scss │ │ └── _rotating-exits.scss └── compass │ ├── _css3.scss │ ├── _functions.scss │ ├── _layout.scss │ ├── _reset-legacy.scss │ ├── _reset.scss │ ├── _support.scss │ ├── _typography.scss │ ├── _utilities.scss │ ├── css3 │ ├── _animation.scss │ ├── _appearance.scss │ ├── _background-clip.scss │ ├── _background-origin.scss │ ├── _background-size.scss │ ├── _border-radius.scss │ ├── _box-shadow.scss │ ├── _box-sizing.scss │ ├── _box.scss │ ├── _columns.scss │ ├── _filter.scss │ ├── _flexbox.scss │ ├── _font-face.scss │ ├── _hyphenation.scss │ ├── _images.scss │ ├── _inline-block.scss │ ├── _opacity.scss │ ├── _pie.scss │ ├── _regions.scss │ ├── _shared.scss │ ├── _text-shadow.scss │ ├── _transform-legacy.scss │ ├── _transform.scss │ ├── _transition.scss │ └── _user-interface.scss │ ├── functions │ ├── _colors.scss │ ├── _constants.scss │ ├── _cross_browser_support.scss │ ├── _display.scss │ ├── _font_files.scss │ ├── _gradient_support.scss │ └── _lists.scss │ ├── layout │ ├── _grid-background.scss │ ├── _sticky-footer.scss │ └── _stretching.scss │ ├── reset │ ├── _utilities-legacy.scss │ └── _utilities.scss │ ├── typography │ ├── _links.scss │ ├── _lists.scss │ ├── _text.scss │ ├── _vertical_rhythm.scss │ ├── links │ │ ├── _hover-link.scss │ │ ├── _link-colors.scss │ │ └── _unstyled-link.scss │ ├── lists │ │ ├── _bullets.scss │ │ ├── _horizontal-list.scss │ │ ├── _inline-block-list.scss │ │ └── _inline-list.scss │ └── text │ │ ├── _ellipsis.scss │ │ ├── _force-wrap.scss │ │ ├── _nowrap.scss │ │ └── _replacement.scss │ └── utilities │ ├── _color.scss │ ├── _general.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _print.scss │ ├── _sprites.scss │ ├── _tables.scss │ ├── _text.scss │ ├── color │ └── _contrast.scss │ ├── general │ ├── _clearfix.scss │ ├── _float.scss │ ├── _hacks.scss │ ├── _min.scss │ ├── _reset.scss │ ├── _tabs.scss │ └── _tag-cloud.scss │ ├── links │ ├── _hover-link.scss │ ├── _link-colors.scss │ └── _unstyled-link.scss │ ├── lists │ ├── _bullets.scss │ ├── _horizontal-list.scss │ ├── _inline-block-list.scss │ └── _inline-list.scss │ ├── sprites │ ├── _base.scss │ └── _sprite-img.scss │ ├── tables │ ├── _alternating-rows-and-columns.scss │ ├── _borders.scss │ └── _scaffolding.scss │ └── text │ ├── _ellipsis.scss │ ├── _nowrap.scss │ └── _replacement.scss ├── package.json └── test ├── compileSpec.js ├── css3 ├── borderRadiusSpec.js ├── boxShadowSpec.js ├── boxSizingSpec.js ├── columnsSpec.js ├── flexboxSpec.js ├── imagesSpec.js ├── pieSpec.js └── transitionSpec.js ├── functionsSpec.js ├── helper ├── compare.js ├── property.js ├── render.js └── ruleset.js ├── imports.scss └── imports_animation.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | dist/* 3 | .sass-cache/* 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.11" 4 | - "0.10" 5 | -------------------------------------------------------------------------------- /LICENSE.markdown: -------------------------------------------------------------------------------- 1 | Copyright (c) 2009 Christopher M. Eppstein 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | No attribution is required by products that make use of this software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | 23 | Except as contained in this notice, the name(s) of the above copyright 24 | holders shall not be used in advertising or otherwise to promote the sale, 25 | use or other dealings in this Software without prior written authorization. 26 | 27 | Contributors to this project agree to grant all rights to the copyright 28 | holder of the primary product. Attribution is maintained in the source 29 | control history of the product. 30 | -------------------------------------------------------------------------------- /LICENSE_backup.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2009-2014 Christopher M. Eppstein 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | No attribution is required by products that make use of this software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | 23 | Except as contained in this notice, the name(s) of the above copyright 24 | holders shall not be used in advertising or otherwise to promote the sale, 25 | use or other dealings in this Software without prior written authorization. 26 | 27 | Contributors to this project agree to grant all rights to the copyright 28 | holder of the primary product. Attribution is maintained in the source 29 | control history of the product. 30 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # Status 2 | 3 | This library is not maintained anymore. 4 | 5 | [![Build Status](https://travis-ci.org/Igosuki/compass-mixins.svg?branch=master)](https://travis-ci.org/Igosuki/compass-mixins) 6 | 7 | # Compass SASS Stylesheets 8 | 9 | This is a repository to pull SASS style sheets on Bower, and enjoy the compass mixins by using libsass for faster compilation. This project makes minimal modifications to the original Compass 0.12.X stylesheets from the [original repository](https://github.com/Compass/compass/blob/f9e8b54f41ee349f53413d36785b0f979881e6e3/frameworks/compass/stylesheets), intented to improve libsass compatibility and not change output. 10 | 11 | ## Compass Ruby Functions 12 | 13 | This project includes reasonably similar implementations of some of the Ruby functions that Compass provides as Sass extensions. These are used in some Compass mixins, such as `@include background()`. 14 | 15 | To make those functions available to your compass mixins, you'll want to either `@import "compass";` or `@import "compass/functions"'` before the specific compass scss files you import. 16 | 17 | ## Contributors 18 | Guillaume Balaine Igosuki@github 19 | Michael Heillein michaek@github 20 | 21 | ## License 22 | Copyright (c) 2008-2009 Christopher M. Eppstein
23 | All Rights Reserved.
24 | Released under a [slightly modified MIT License](https://github.com/Compass/compass/blob/stable/LICENSE.markdown). 25 | 26 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compass-mixins", 3 | "version": "0.12.6", 4 | "authors": [ 5 | "Guillaume Balaine ", 6 | "Michael Heillein " 7 | ], 8 | "description": "Compass stylesheets", 9 | "main": "lib/_compass.scss", 10 | "keywords": [ 11 | "compass", 12 | "mixins", 13 | "sass", 14 | "css3" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /lib/_animate.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | @import "animation/core"; 3 | @import "animation/animate"; 4 | -------------------------------------------------------------------------------- /lib/_compass.scss: -------------------------------------------------------------------------------- 1 | @import "compass/functions"; 2 | @import "compass/utilities"; 3 | @import "compass/typography"; 4 | @import "compass/css3"; 5 | -------------------------------------------------------------------------------- /lib/_lemonade.scss: -------------------------------------------------------------------------------- 1 | @mixin image-dimensions($file) { 2 | height: image-height($file); 3 | width: image-width($file); 4 | } 5 | 6 | @mixin sprite-image($file) { 7 | background: sprite-image($file) $repeat; 8 | } 9 | 10 | @mixin sized-sprite-image($file) { 11 | background: sprite-image($file); 12 | @include image-dimensions($file); 13 | } 14 | 15 | @mixin sprite-folder($folder, $image-dimensions: false) { 16 | .#{$folder} { 17 | @if $image-dimensions { 18 | background: sprite-url($folder); 19 | } 20 | @else { 21 | background: sprite-url($folder) no-repeat; 22 | } 23 | } 24 | @for $i from 0 to sprite-files-in-folder($folder) { 25 | $file: sprite-file-from-folder($folder, $i); 26 | .#{$folder}-#{image-basename($file)} { 27 | @extend .#{$folder}; 28 | background-position: sprite-position(sprite-file-from-folder($folder, $i)); 29 | @if $image-dimensions { 30 | @include image-dimensions($file); 31 | } 32 | } 33 | } 34 | } 35 | 36 | @mixin sized-sprite-folder($folder) { 37 | @include sprite-folder($folder, true); 38 | } -------------------------------------------------------------------------------- /lib/animation/_animate.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Animations from Animate.css 3 | // Author : Dan Eden 4 | // URL : http://daneden.me/animate/ 5 | // 6 | // Attention seekers 7 | // - flash bounce shake tada swing wobble pulse 8 | // Fading entrances 9 | // - fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig 10 | // Fading exits 11 | // - fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig 12 | // Bouncing entrances 13 | // - bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight 14 | // Bouncing exits 15 | // - bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight 16 | // Rotating entrances 17 | // - rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight 18 | // Rotating exits 19 | // - rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight 20 | // Lightspeed 21 | // - lightSpeedIn lightSpeedOut 22 | // Specials 23 | // - hinge rollIn rollOut 24 | // --------------------------------------------------------------------------- 25 | @import "animate/attention-seekers"; 26 | @import "animate/bouncing"; 27 | @import "animate/fading"; 28 | @import "animate/flippers"; 29 | @import "animate/lightspeed"; 30 | @import "animate/rotating"; 31 | @import "animate/specials"; 32 | -------------------------------------------------------------------------------- /lib/animation/_core.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // CSS Animations. 4 | 5 | // Apply an animation property and value with the correct browser support 6 | @mixin animation-support($property, $value) { 7 | @include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); } 8 | 9 | // Name of any animation as a string. 10 | $default-animation-name : false !default; 11 | 12 | // Duration of the entire animation in seconds. 13 | $default-animation-duration : false !default; 14 | 15 | // Delay for start of animation in seconds. 16 | $default-animation-delay : false !default; 17 | 18 | // The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)] 19 | $default-animation-timing-function : false !default; 20 | 21 | // The number of times an animation cycle is played. [infinite | $number] 22 | $default-animation-iteration-count : false !default; 23 | 24 | // Whether or not the animation should play in reverse on alternate cycles. [normal | alternate] 25 | $default-animation-direction : false !default; 26 | 27 | // What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both] 28 | $default-animation-fill-mode : false !default; 29 | 30 | // Whether the animation is running or paused. [running | paused] 31 | $default-animation-play-state : false !default; 32 | 33 | // Create a named animation sequence that can be applied to elements later. 34 | // 35 | // $name - The name of your animation. 36 | // @content - The keyframes of the animation. 37 | @mixin keyframes( 38 | $name, 39 | $moz: $experimental-support-for-mozilla, 40 | $webkit: $experimental-support-for-webkit, 41 | $o: $experimental-support-for-opera, 42 | $ms: $experimental-support-for-microsoft, 43 | $khtml: $experimental-support-for-khtml, 44 | $official: true 45 | ) { 46 | @if $moz { 47 | @include with-only-support-for($moz: true) { 48 | @-moz-keyframes #{$name} { @content; } 49 | } 50 | } 51 | @if $webkit { 52 | @include with-only-support-for($webkit: true) { 53 | @-webkit-keyframes #{$name} { @content; } 54 | } 55 | } 56 | @if $o { 57 | @include with-only-support-for($o: true) { 58 | @-o-keyframes #{$name} { @content; } 59 | } 60 | } 61 | @if $ms { 62 | @include with-only-support-for($ms: true) { 63 | @-ms-keyframes #{$name} { @content; } 64 | } 65 | } 66 | @if $khtml { 67 | @include with-only-support-for($khtml: true) { 68 | @-khtml-keyframes #{$name} { @content; } 69 | } 70 | } 71 | @if $official { 72 | @include with-only-support-for { 73 | @keyframes #{$name} { @content; } 74 | } 75 | } 76 | } 77 | 78 | // Apply 1-10 animation names. 79 | @mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) { 80 | $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10); 81 | @include animation-support(animation-name, $name); } 82 | 83 | // Apply 1-10 animation durations. 84 | @mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) { 85 | $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10); 86 | @include animation-support(animation-duration, $duration); } 87 | 88 | // Apply 1-10 animation delays. 89 | @mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) { 90 | $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10); 91 | @include animation-support(animation-delay, $delay); } 92 | 93 | // Apply 1-10 animation timing functions. 94 | @mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) { 95 | $function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10); 96 | @include animation-support(animation-timing-function, $function); } 97 | 98 | // Apply 1-10 animation iteration counts. 99 | @mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) { 100 | $count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10); 101 | @include animation-support(animation-iteration-count, $count); } 102 | 103 | // Apply 1-10 animation directions. 104 | @mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) { 105 | $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10); 106 | @include animation-support(animation-direction, $direction); } 107 | 108 | // Apply 1-10 animation fill modes. 109 | @mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) { 110 | $mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10); 111 | @include animation-support(animation-fill-mode, $mode); } 112 | 113 | // Apply 1-10 animation play states. 114 | @mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) { 115 | $state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10); 116 | @include animation-support(animation-play-state, $state); } 117 | 118 | // Shortcut to apply a named animation to an element, with all the settings. 119 | // 120 | // $animation-1 : Name and settings for the first animation. [ | default] 121 | // ... 122 | // $animation-10 : Name and settings for the tenth animation. 123 | @mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) { 124 | @if $animation-1 == default { 125 | $animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); } 126 | $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10); 127 | @include animation-support(animation, $animation); } 128 | -------------------------------------------------------------------------------- /lib/animation/_shared.scss: -------------------------------------------------------------------------------- 1 | @mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) { 2 | $experimental-support-for-mozilla: $moz; 3 | $experimental-support-for-webkit: $webkit; 4 | $experimental-support-for-microsoft: $ms; 5 | $experimental-support-for-opera: $o; 6 | $experimental-support-for-khtml: $khtml; 7 | } 8 | 9 | @mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) { 10 | // Capture the current state 11 | $original-moz: $experimental-support-for-mozilla; 12 | $original-webkit: $experimental-support-for-webkit; 13 | $original-o: $experimental-support-for-opera; 14 | $original-ms: $experimental-support-for-microsoft; 15 | $original-khtml: $experimental-support-for-khtml; 16 | 17 | @include set-experimental-support($moz, $webkit, $ms, $o, $khtml); 18 | 19 | @content; 20 | 21 | @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml); 22 | } -------------------------------------------------------------------------------- /lib/animation/animate/_attention-seekers.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(flash) { 3 | 0% { 4 | opacity: 1; } 5 | 25% { 6 | opacity: 0; } 7 | 50% { 8 | opacity: 1; } 9 | 75% { 10 | opacity: 0; } 11 | 100% { 12 | opacity: 1; } } 13 | 14 | 15 | // --------------------------------------------------------------------------- 16 | @include keyframes(bounce) { 17 | 0% { 18 | @include translateY(0); } 19 | 20% { 20 | @include translateY(0); } 21 | 40% { 22 | @include translateY(-30px); } 23 | 50% { 24 | @include translateY(0); } 25 | 60% { 26 | @include translateY(-15px); } 27 | 80% { 28 | @include translateY(0); } 29 | 100% { 30 | @include translateY(0); } } 31 | 32 | 33 | // --------------------------------------------------------------------------- 34 | @include keyframes(shake) { 35 | 0% { 36 | @include translateX(0); } 37 | 10% { 38 | @include translateX(-10px); } 39 | 20% { 40 | @include translateX(10px); } 41 | 30% { 42 | @include translateX(-10px); } 43 | 40% { 44 | @include translateX(10px); } 45 | 50% { 46 | @include translateX(-10px); } 47 | 60% { 48 | @include translateX(10px); } 49 | 70% { 50 | @include translateX(-10px); } 51 | 80% { 52 | @include translateX(10px); } 53 | 90% { 54 | @include translateX(-10px); } 55 | 100% { 56 | @include translateX(0); } } 57 | 58 | 59 | // --------------------------------------------------------------------------- 60 | @include keyframes(tada) { 61 | 0% { 62 | @include scale(1); } 63 | 10% { 64 | @include transform(scale(0.9) rotate(-3deg)); } 65 | 20% { 66 | @include transform(scale(0.9) rotate(-3deg)); } 67 | 30% { 68 | @include transform(scale(1.1) rotate(3deg)); } 69 | 40% { 70 | @include transform(scale(1.1) rotate(-3deg)); } 71 | 50% { 72 | @include transform(scale(1.1) rotate(3deg)); } 73 | 60% { 74 | @include transform(scale(1.1) rotate(-3deg)); } 75 | 70% { 76 | @include transform(scale(1.1) rotate(3deg)); } 77 | 80% { 78 | @include transform(scale(1.1) rotate(-3deg)); } 79 | 90% { 80 | @include transform(scale(1.1) rotate(3deg)); } 81 | 100% { 82 | @include transform(scale(1) rotate(0)); } } 83 | 84 | 85 | // --------------------------------------------------------------------------- 86 | @include keyframes(swing) { 87 | 20%, 40%, 60%, 80%, 100% { 88 | @include transform-origin(top center); } 89 | 20% { 90 | @include rotate(15deg); } 91 | 40% { 92 | @include rotate(-10deg); } 93 | 60% { 94 | @include rotate(5deg); } 95 | 80% { 96 | @include rotate(-5deg); } 97 | 100% { 98 | @include rotate(0deg); } } 99 | 100 | 101 | // --------------------------------------------------------------------------- 102 | @include keyframes(wobble) { 103 | 0% { 104 | @include translateX(0%); } 105 | 15% { 106 | @include transform(translateX(-25%) rotate(-5deg)); } 107 | 30% { 108 | @include transform(translateX(20%) rotate(3deg)); } 109 | 45% { 110 | @include transform(translateX(-15%) rotate(-3deg)); } 111 | 60% { 112 | @include transform(translateX(10%) rotate(2deg)); } 113 | 75% { 114 | @include transform(translateX(-5%) rotate(-1deg)); } 115 | 100% { 116 | @include transform(translateX(0%)); } } 117 | 118 | 119 | // --------------------------------------------------------------------------- 120 | @include keyframes(pulse) { 121 | 0% { 122 | @include scale(1); } 123 | 50% { 124 | @include scale(1.1); } 125 | 100% { 126 | @include scale(1); } } 127 | 128 | 129 | // --------------------------------------------------------------------------- 130 | @include keyframes(wiggle) { 131 | 0% { 132 | @include skewX(9deg); } 133 | 10% { 134 | @include skewX(-8deg); } 135 | 20% { 136 | @include skewX(7deg); } 137 | 30% { 138 | @include skewX(-6deg); } 139 | 40% { 140 | @include skewX(5deg); } 141 | 50% { 142 | @include skewX(-4deg); } 143 | 60% { 144 | @include skewX(3deg); } 145 | 70% { 146 | @include skewX(-2deg); } 147 | 80% { 148 | @include skewX(1deg); } 149 | 90% { 150 | @include skewX(0deg); } 151 | 100% { 152 | @include skewX(0deg); } } -------------------------------------------------------------------------------- /lib/animation/animate/_bouncing.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @import "bouncing/bouncing-exits"; 3 | @import "bouncing/bouncing-entrances"; -------------------------------------------------------------------------------- /lib/animation/animate/_classes.scss: -------------------------------------------------------------------------------- 1 | // .animated and .animated.hinge classes for external use 2 | .animated { 3 | @include animation(1s ease both); } 4 | 5 | .animated.hinge { 6 | @include animation(2s ease both); } 7 | 8 | // Animations list 9 | $animations: flash, shake, bounce, tada, swing, wobble, wiggle, pulse, flip, flipInX, flipOutX, flipInY, flipOutY, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, lightSpeedIn, lightSpeedOut, hinge, rollIn, rollOut; 10 | 11 | // Animations that require backface-visibility 12 | $backface: flip, flipInX, flipOutX, flipInY, flipOutY; 13 | 14 | // Creation of the different classes 15 | @each $anim in $animations { 16 | .#{$anim} { 17 | @if index($backface, $anim) { 18 | @include backface-visibility(visible); } 19 | @if $anim == "swing" { 20 | @include transform-origin(top, center); } 21 | @include animation-name($anim); } } 22 | -------------------------------------------------------------------------------- /lib/animation/animate/_fading.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @import "fading/fading-exits"; 3 | @import "fading/fading-entrances"; -------------------------------------------------------------------------------- /lib/animation/animate/_flippers.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(flip) { 3 | 0% { 4 | @include transform(perspective(400px) rotateY(0)); 5 | @include animation-timing-function(ease-out); 6 | } 7 | 40% { 8 | @include transform(perspective(400px) translateZ(150px) rotateY(170deg)); 9 | @include animation-timing-function(ease-out); 10 | } 11 | 50% { 12 | @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1)); 13 | @include animation-timing-function(ease-in); 14 | } 15 | 80% { 16 | @include transform(perspective(400px) rotateY(360deg) scale(0.95)); 17 | @include animation-timing-function(ease-in); 18 | } 19 | 100% { 20 | @include transform(perspective(400px) scale(1)); 21 | @include animation-timing-function(ease-in); 22 | } 23 | } 24 | 25 | 26 | // --------------------------------------------------------------------------- 27 | @include keyframes(flipInX) { 28 | 0% { 29 | @include transform(perspective(400px) rotateX(90deg)); 30 | @include opacity(0); 31 | } 32 | 40% { 33 | @include transform(perspective(400px) rotateX(-10deg)); 34 | } 35 | 70% { 36 | @include transform(perspective(400px) rotateX(10deg)); 37 | } 38 | 100% { 39 | @include transform(perspective(400px) rotateX(0deg)); 40 | @include opacity(1); 41 | } 42 | } 43 | 44 | 45 | // --------------------------------------------------------------------------- 46 | @include keyframes(flipOutX) { 47 | 0% { 48 | @include transform(perspective(400px) rotateX(0deg)); 49 | @include opacity(1); 50 | } 51 | 100% { 52 | @include transform(perspective(400px) rotateX(90deg)); 53 | @include opacity(0); 54 | } 55 | } 56 | 57 | 58 | // --------------------------------------------------------------------------- 59 | @include keyframes(flipInY) { 60 | 0% { 61 | @include transform(perspective(400px) rotateY(90deg)); 62 | @include opacity(0); 63 | } 64 | 40% { 65 | @include transform(perspective(400px) rotateY(-10deg)); 66 | } 67 | 70% { 68 | @include transform(perspective(400px) rotateY(10deg)); 69 | } 70 | 100% { 71 | @include transform(perspective(400px) rotateY(0deg)); 72 | @include opacity(1); 73 | } 74 | } 75 | 76 | 77 | // --------------------------------------------------------------------------- 78 | @include keyframes(flipOutY) { 79 | 0% { 80 | @include transform(perspective(400px) rotateY(0deg)); 81 | @include opacity(1); 82 | } 83 | 100% { 84 | @include transform(perspective(400px) rotateY(90deg)); 85 | @include opacity(0); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /lib/animation/animate/_lightspeed.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(lightSpeedIn) { 3 | 0% { 4 | @include transform(translateX(100%) skewX(-30deg)); 5 | @include opacity(0); } 6 | 60% { 7 | @include transform(translateX(-20%) skewX(30deg)); 8 | @include opacity(1); } 9 | 80% { 10 | @include transform(translateX(0%) skewX(-15deg)); 11 | @include opacity(1); } 12 | 100% { 13 | @include transform(translateX(0%) skewX(0deg)); 14 | @include opacity(1); } } 15 | 16 | 17 | // --------------------------------------------------------------------------- 18 | @include keyframes(lightSpeedOut) { 19 | 0% { 20 | @include transform(translateX(0%) skewX(0deg)); 21 | @include opacity(1); } 22 | 100% { 23 | @include transform(translateX(100%) skewX(-30deg)); 24 | @include opacity(0); } } -------------------------------------------------------------------------------- /lib/animation/animate/_rotating.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @import "rotating/rotating-exits"; 3 | @import "rotating/rotating-entrances"; 4 | -------------------------------------------------------------------------------- /lib/animation/animate/_specials.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(hinge) { 3 | 0% { 4 | @include rotate(0); 5 | @include transform-origin(top left); 6 | @include animation-timing-function(ease-in-out); } 7 | 20%, 60% { 8 | @include rotate(80deg); 9 | @include transform-origin(top left); 10 | @include animation-timing-function(ease-in-out); } 11 | 40% { 12 | @include rotate(60deg); 13 | @include transform-origin(top left); 14 | @include animation-timing-function(ease-in-out); } 15 | 80% { 16 | @include transform(rotate(60deg) translateY(0)); 17 | @include opacity(1); 18 | @include transform-origin(top left); 19 | @include animation-timing-function(ease-in-out); } 20 | 100% { 21 | @include translateY(700px); 22 | @include opacity(0); } } 23 | 24 | 25 | // --------------------------------------------------------------------------- 26 | @include keyframes(rollIn) { 27 | 0% { 28 | @include opacity(0); 29 | @include transform(translateX(-100%) rotate(-120deg)); } 30 | 100% { 31 | @include opacity(1); 32 | @include transform(translateX(0px) rotate(0deg)); } } 33 | 34 | 35 | // --------------------------------------------------------------------------- 36 | @include keyframes(rollOut) { 37 | 0% { 38 | @include opacity(1); 39 | @include transform(translateX(0px) rotate(0deg)); } 40 | 100% { 41 | @include opacity(0); 42 | @include transform(translateX(-100%) rotate(-120deg)); } } 43 | -------------------------------------------------------------------------------- /lib/animation/animate/bouncing/_bouncing-entrances.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(bounceIn) { 3 | 0% { 4 | opacity: 0; 5 | @include scale(0.3); } 6 | 50% { 7 | opacity: 1; 8 | @include scale(1.05); } 9 | 70% { 10 | @include scale(0.9); } 11 | 100% { 12 | @include scale(1); } } 13 | 14 | 15 | // --------------------------------------------------------------------------- 16 | @include keyframes(bounceInDown) { 17 | 0% { 18 | opacity: 0; 19 | @include translateY(-2000px); } 20 | 60% { 21 | opacity: 1; 22 | @include translateY(30px); } 23 | 80% { 24 | @include translateY(-10px); } 25 | 100% { 26 | @include translateY(0); } } 27 | 28 | 29 | // --------------------------------------------------------------------------- 30 | @include keyframes(bounceInUp) { 31 | 0% { 32 | opacity: 0; 33 | @include translateY(2000px); } 34 | 60% { 35 | opacity: 1; 36 | @include translateY(-30px); } 37 | 80% { 38 | @include translateY(10px); } 39 | 100% { 40 | @include translateY(0); } } 41 | 42 | 43 | // --------------------------------------------------------------------------- 44 | @include keyframes(bounceInRight) { 45 | 0% { 46 | opacity: 0; 47 | @include translateX(2000px); } 48 | 60% { 49 | opacity: 1; 50 | @include translateX(-30px); } 51 | 80% { 52 | @include translateX(10px); } 53 | 100% { 54 | @include translateX(0); } } 55 | 56 | 57 | // --------------------------------------------------------------------------- 58 | @include keyframes(bounceInLeft) { 59 | 0% { 60 | opacity: 0; 61 | @include translateX(-2000px); } 62 | 60% { 63 | opacity: 1; 64 | @include translateX(30px); } 65 | 80% { 66 | @include translateX(-10px); } 67 | 100% { 68 | @include translateX(0); } } 69 | -------------------------------------------------------------------------------- /lib/animation/animate/bouncing/_bouncing-exits.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(bounceOut) { 3 | 0% { 4 | @include scale(1); } 5 | 25% { 6 | @include scale(0.95); } 7 | 50% { 8 | opacity: 1; 9 | @include scale(1.1); } 10 | 100% { 11 | opacity: 0; 12 | @include scale(0.3); } } 13 | 14 | 15 | // --------------------------------------------------------------------------- 16 | @include keyframes(bounceOutUp) { 17 | 0% { 18 | @include translateY(0); } 19 | 20% { 20 | opacity: 1; 21 | @include translateY(20px); } 22 | 100% { 23 | opacity: 0; 24 | @include translateY(-2000px); } } 25 | 26 | 27 | // --------------------------------------------------------------------------- 28 | @include keyframes(bounceOutDown) { 29 | 0% { 30 | @include translateY(0); } 31 | 20% { 32 | opacity: 1; 33 | @include translateY(-20px); } 34 | 100% { 35 | opacity: 0; 36 | @include translateY(2000px); } } 37 | 38 | 39 | // --------------------------------------------------------------------------- 40 | @include keyframes(bounceOutLeft) { 41 | 0% { 42 | @include translateX(0); } 43 | 20% { 44 | opacity: 1; 45 | @include translateX(20px); } 46 | 100% { 47 | opacity: 0; 48 | @include translateX(-2000px); } } 49 | 50 | 51 | // --------------------------------------------------------------------------- 52 | @include keyframes(bounceOutRight) { 53 | 0% { 54 | @include translateX(0); } 55 | 20% { 56 | opacity: 1; 57 | @include translateX(-20px); } 58 | 100% { 59 | opacity: 0; 60 | @include translateX(2000px); } } 61 | -------------------------------------------------------------------------------- /lib/animation/animate/fading/_fading-entrances.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(fadeIn) { 3 | 0% { 4 | opacity: 0; } 5 | 100% { 6 | opacity: 1; } } 7 | 8 | 9 | // --------------------------------------------------------------------------- 10 | @include keyframes(fadeInUp) { 11 | 0% { 12 | @include translateY(20px); 13 | opacity: 0; } 14 | 100% { 15 | @include translateY(0); 16 | opacity: 1; } } 17 | 18 | 19 | // --------------------------------------------------------------------------- 20 | @include keyframes(fadeInDown) { 21 | 0% { 22 | @include translateY(-20px); 23 | opacity: 0; } 24 | 100% { 25 | @include translateY(0); 26 | opacity: 1; } } 27 | 28 | 29 | // --------------------------------------------------------------------------- 30 | @include keyframes(fadeInRight) { 31 | 0% { 32 | @include translateX(20px); 33 | opacity: 0; } 34 | 100% { 35 | @include translateX(0); 36 | opacity: 1; } } 37 | 38 | 39 | // --------------------------------------------------------------------------- 40 | @include keyframes(fadeInLeft) { 41 | 0% { 42 | @include translateX(-20px); 43 | opacity: 0; } 44 | 100% { 45 | @include translateX(0); 46 | opacity: 1; } } 47 | 48 | 49 | // --------------------------------------------------------------------------- 50 | @include keyframes(fadeInUpBig) { 51 | 0% { 52 | @include translateY(2000px); 53 | opacity: 0; } 54 | 100% { 55 | @include translateY(0); 56 | opacity: 1; } } 57 | 58 | 59 | // --------------------------------------------------------------------------- 60 | @include keyframes(fadeInDownBig) { 61 | 0% { 62 | opacity: 0; 63 | @include translateY(-2000px); } 64 | 100% { 65 | opacity: 1; 66 | @include translateY(0); } } 67 | 68 | 69 | // --------------------------------------------------------------------------- 70 | @include keyframes(fadeInRightBig) { 71 | 0% { 72 | opacity: 0; 73 | @include translateX(2000px); } 74 | 100% { 75 | opacity: 1; 76 | @include translateX(0); } } 77 | 78 | 79 | // --------------------------------------------------------------------------- 80 | @include keyframes(fadeInLeftBig) { 81 | 0% { 82 | opacity: 0; 83 | @include translateX(-2000px); } 84 | 100% { 85 | opacity: 1; 86 | @include translateX(0); } } 87 | -------------------------------------------------------------------------------- /lib/animation/animate/fading/_fading-exits.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(fadeOut) { 3 | 0% { 4 | opacity: 1; } 5 | 100% { 6 | opacity: 0; } } 7 | 8 | 9 | // --------------------------------------------------------------------------- 10 | @include keyframes(fadeOutUp) { 11 | 0% { 12 | @include translateY(0); 13 | opacity: 1; } 14 | 100% { 15 | @include translateY(-20px); 16 | opacity: 0; } } 17 | 18 | 19 | // --------------------------------------------------------------------------- 20 | @include keyframes(fadeOutDown) { 21 | 0% { 22 | @include translateY(0); 23 | opacity: 1; } 24 | 100% { 25 | @include translateY(20px); 26 | opacity: 0; } } 27 | 28 | 29 | // --------------------------------------------------------------------------- 30 | @include keyframes(fadeOutRight) { 31 | 0% { 32 | @include translateX(0); 33 | opacity: 1; } 34 | 100% { 35 | @include translateX(20px); 36 | opacity: 0; } } 37 | 38 | 39 | // --------------------------------------------------------------------------- 40 | @include keyframes(fadeOutLeft) { 41 | 0% { 42 | @include translateX(0); 43 | opacity: 1; } 44 | 100% { 45 | @include translateX(-20px); 46 | opacity: 0; } } 47 | 48 | 49 | // --------------------------------------------------------------------------- 50 | @include keyframes(fadeOutUpBig) { 51 | 0% { 52 | @include translateY(0); 53 | opacity: 1; } 54 | 100% { 55 | @include translateY(-2000px); 56 | opacity: 0; } } 57 | 58 | 59 | // --------------------------------------------------------------------------- 60 | @include keyframes(fadeOutDownBig) { 61 | 0% { 62 | opacity: 1; 63 | @include translateY(0); } 64 | 100% { 65 | opacity: 0; 66 | @include translateY(2000px); } } 67 | 68 | 69 | // --------------------------------------------------------------------------- 70 | @include keyframes(fadeOutRightBig) { 71 | 0% { 72 | opacity: 1; 73 | @include translateX(0); } 74 | 100% { 75 | opacity: 0; 76 | @include translateX(2000px); } } 77 | 78 | 79 | // --------------------------------------------------------------------------- 80 | @include keyframes(fadeOutLeftBig) { 81 | 0% { 82 | opacity: 1; 83 | @include translateX(0); } 84 | 100% { 85 | opacity: 0; 86 | @include translateX(-2000px); } } 87 | -------------------------------------------------------------------------------- /lib/animation/animate/rotating/_rotating-entrances.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(rotateIn) { 3 | 0% { 4 | @include transform-origin(center center); 5 | @include rotate(-200deg); 6 | opacity: 0; } 7 | 100% { 8 | @include transform-origin(center center); 9 | @include rotate(0); 10 | opacity: 1; } } 11 | 12 | 13 | // --------------------------------------------------------------------------- 14 | @include keyframes(rotateInDownLeft) { 15 | 0% { 16 | @include transform-origin(left bottom); 17 | @include rotate(-90deg); 18 | opacity: 0; } 19 | 100% { 20 | @include transform-origin(left bottom); 21 | @include rotate(0); 22 | opacity: 1; } } 23 | 24 | 25 | // --------------------------------------------------------------------------- 26 | @include keyframes(rotateInUpLeft) { 27 | 0% { 28 | @include transform-origin(left bottom); 29 | @include rotate(90deg); 30 | opacity: 0; } 31 | 100% { 32 | @include transform-origin(left bottom); 33 | @include rotate(0); 34 | opacity: 1; } } 35 | 36 | 37 | // --------------------------------------------------------------------------- 38 | @include keyframes(rotateInUpRight) { 39 | 0% { 40 | @include transform-origin(right bottom); 41 | @include rotate(-90deg); 42 | opacity: 0; } 43 | 100% { 44 | @include transform-origin(right bottom); 45 | @include rotate(0); 46 | opacity: 1; } } 47 | 48 | 49 | // --------------------------------------------------------------------------- 50 | @include keyframes(rotateInDownRight) { 51 | 0% { 52 | @include transform-origin(right bottom); 53 | @include rotate(90deg); 54 | opacity: 0; } 55 | 100% { 56 | @include transform-origin(right bottom); 57 | @include rotate(0); 58 | opacity: 1; } } 59 | -------------------------------------------------------------------------------- /lib/animation/animate/rotating/_rotating-exits.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | @include keyframes(rotateOut) { 3 | 0% { 4 | @include transform-origin(center center); 5 | @include rotate(0); 6 | opacity: 1; } 7 | 100% { 8 | @include transform-origin(center center); 9 | @include rotate(200deg); 10 | opacity: 0; } } 11 | 12 | 13 | // --------------------------------------------------------------------------- 14 | @include keyframes(rotateOutDownLeft) { 15 | 0% { 16 | @include transform-origin(left bottom); 17 | @include rotate(0); 18 | opacity: 1; } 19 | 100% { 20 | @include transform-origin(left bottom); 21 | @include rotate(90deg); 22 | opacity: 0; } } 23 | 24 | 25 | // --------------------------------------------------------------------------- 26 | @include keyframes(rotateOutUpLeft) { 27 | 0% { 28 | @include transform-origin(left bottom); 29 | @include rotate(0); 30 | opacity: 1; } 31 | 100% { 32 | @include transform-origin(left bottom); 33 | @include rotate(-90deg); 34 | opacity: 0; } } 35 | 36 | 37 | // --------------------------------------------------------------------------- 38 | @include keyframes(rotateOutDownRight) { 39 | 0% { 40 | @include transform-origin(right bottom); 41 | @include rotate(0); 42 | opacity: 1; } 43 | 100% { 44 | @include transform-origin(right bottom); 45 | @include rotate(-90deg); 46 | opacity: 0; } } 47 | 48 | 49 | // --------------------------------------------------------------------------- 50 | @include keyframes(rotateOutUpRight) { 51 | 0% { 52 | @include transform-origin(right bottom); 53 | @include rotate(0); 54 | opacity: 1; } 55 | 100% { 56 | @include transform-origin(right bottom); 57 | @include rotate(90deg); 58 | opacity: 0; } } 59 | -------------------------------------------------------------------------------- /lib/compass/_css3.scss: -------------------------------------------------------------------------------- 1 | @import "css3/border-radius"; 2 | @import "css3/inline-block"; 3 | @import "css3/opacity"; 4 | @import "css3/box-shadow"; 5 | @import "css3/text-shadow"; 6 | @import "css3/columns"; 7 | @import "css3/box-sizing"; 8 | @import "css3/box"; 9 | @import "css3/images"; 10 | @import "css3/background-clip"; 11 | @import "css3/background-origin"; 12 | @import "css3/background-size"; 13 | @import "css3/font-face"; 14 | @import "css3/transform"; 15 | @import "css3/transition"; 16 | @import "css3/appearance"; 17 | @import "css3/regions"; 18 | @import "css3/hyphenation"; 19 | @import "css3/filter"; 20 | @import "css3/pie"; 21 | @import "css3/user-interface"; 22 | @import "css3/flexbox"; -------------------------------------------------------------------------------- /lib/compass/_functions.scss: -------------------------------------------------------------------------------- 1 | @import "functions/lists"; 2 | @import "functions/cross_browser_support"; 3 | @import "functions/gradient_support"; 4 | @import "functions/constants"; 5 | @import "functions/display"; 6 | @import "functions/colors"; 7 | @import "functions/font_files"; 8 | -------------------------------------------------------------------------------- /lib/compass/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "layout/grid-background"; 2 | @import "layout/sticky-footer"; 3 | @import "layout/stretching"; 4 | -------------------------------------------------------------------------------- /lib/compass/_reset-legacy.scss: -------------------------------------------------------------------------------- 1 | @import "reset/utilities-legacy"; 2 | 3 | @include global-reset; 4 | -------------------------------------------------------------------------------- /lib/compass/_reset.scss: -------------------------------------------------------------------------------- 1 | @import "reset/utilities"; 2 | 3 | @include global-reset; 4 | -------------------------------------------------------------------------------- /lib/compass/_support.scss: -------------------------------------------------------------------------------- 1 | // Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both. 2 | $legacy-support-for-ie: true !default; 3 | 4 | // Setting this to false will result in smaller output, but no support for ie6 hacks 5 | $legacy-support-for-ie6: $legacy-support-for-ie !default; 6 | 7 | // Setting this to false will result in smaller output, but no support for ie7 hacks 8 | $legacy-support-for-ie7: $legacy-support-for-ie !default; 9 | 10 | // Setting this to false will result in smaller output, but no support for legacy ie8 hacks 11 | $legacy-support-for-ie8: $legacy-support-for-ie !default; 12 | 13 | // @private 14 | // The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly, 15 | // But in case the user set each of those explicitly, we need to sync the value of 16 | // this combined variable. 17 | $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8; 18 | 19 | // Whether to output legacy support for mozilla. 20 | // Usually this means hacks to support Firefox 3.6 or earlier. 21 | $legacy-support-for-mozilla: true; 22 | 23 | // Support for mozilla in experimental css3 properties (-moz). 24 | $experimental-support-for-mozilla : true !default; 25 | // Support for webkit in experimental css3 properties (-webkit). 26 | $experimental-support-for-webkit : true !default; 27 | // Support for webkit's original (non-standard) gradient syntax. 28 | $support-for-original-webkit-gradients : true !default; 29 | // Support for opera in experimental css3 properties (-o). 30 | $experimental-support-for-opera : true !default; 31 | // Support for microsoft in experimental css3 properties (-ms). 32 | $experimental-support-for-microsoft : true !default; 33 | // Support for khtml in experimental css3 properties (-khtml). 34 | $experimental-support-for-khtml : false !default; 35 | // Support for svg in experimental css3 properties. 36 | // Setting this to true might add significant size to your 37 | // generated stylesheets. 38 | $experimental-support-for-svg : false !default; 39 | // Support for CSS PIE in experimental css3 properties (-pie). 40 | $experimental-support-for-pie : false !default; 41 | -------------------------------------------------------------------------------- /lib/compass/_typography.scss: -------------------------------------------------------------------------------- 1 | @import "typography/links"; 2 | @import "typography/lists"; 3 | @import "typography/text"; 4 | @import "typography/vertical_rhythm"; 5 | -------------------------------------------------------------------------------- /lib/compass/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/color"; 2 | @import "utilities/general"; 3 | @import "utilities/sprites"; 4 | @import "utilities/tables"; 5 | 6 | // deprecated 7 | @import "typography/links"; 8 | @import "typography/lists"; 9 | @import "typography/text"; 10 | -------------------------------------------------------------------------------- /lib/compass/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // Core imported by default. You can also import 'animate' for predefined animations. 2 | @import "animation/core"; 3 | -------------------------------------------------------------------------------- /lib/compass/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // Change the appearance for Mozilla, Webkit and possibly the future. 4 | // The appearance property is currently not present in any newer CSS specification. 5 | // 6 | // There is no official list of accepted values, but you might check these source: 7 | // Mozilla : https://developer.mozilla.org/en/CSS/-moz-appearance 8 | // Webkit : http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365 9 | // (search for 'appearance' within the page) 10 | 11 | @mixin appearance($ap) { 12 | $ap: unquote($ap); 13 | @include experimental(appearance, $ap, 14 | -moz, -webkit, not(-o), not(-ms), not(-khtml), official 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /lib/compass/css3/_background-clip.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // The default value is `padding-box` -- the box model used by modern browsers. 4 | // 5 | // If you wish to do so, you can override the default constant with `border-box` 6 | // 7 | // To override to the default border-box model, use this code: 8 | // $default-background-clip: border-box 9 | 10 | $default-background-clip: padding-box !default; 11 | 12 | // Clip the background (image and color) at the edge of the padding or border. 13 | // 14 | // Legal Values: 15 | // 16 | // * padding-box 17 | // * border-box 18 | // * text 19 | 20 | @mixin background-clip($clip: $default-background-clip) { 21 | // webkit and mozilla use the deprecated short [border | padding] 22 | $clip: unquote($clip); 23 | $deprecated: $clip; 24 | @if $clip == padding-box { $deprecated: padding; } 25 | @if $clip == border-box { $deprecated: border; } 26 | // Support for webkit and mozilla's use of the deprecated short form 27 | @include experimental(background-clip, $deprecated, 28 | -moz, 29 | -webkit, 30 | not(-o), 31 | not(-ms), 32 | not(-khtml), 33 | not official 34 | ); 35 | @include experimental(background-clip, $clip, 36 | not(-moz), 37 | not(-webkit), 38 | not(-o), 39 | not(-ms), 40 | -khtml, 41 | official 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /lib/compass/css3/_background-origin.scss: -------------------------------------------------------------------------------- 1 | // Override `$default-background-origin` to change the default. 2 | 3 | @import "shared"; 4 | 5 | $default-background-origin: content-box !default; 6 | 7 | // Position the background off the edge of the padding, border or content 8 | // 9 | // * Possible values: 10 | // * `padding-box` 11 | // * `border-box` 12 | // * `content-box` 13 | // * browser defaults to `padding-box` 14 | // * mixin defaults to `content-box` 15 | 16 | 17 | @mixin background-origin($origin: $default-background-origin) { 18 | $origin: unquote($origin); 19 | // webkit and mozilla use the deprecated short [border | padding | content] 20 | $deprecated: $origin; 21 | @if $origin == padding-box { $deprecated: padding; } 22 | @if $origin == border-box { $deprecated: border; } 23 | @if $origin == content-box { $deprecated: content; } 24 | 25 | // Support for webkit and mozilla's use of the deprecated short form 26 | @include experimental(background-origin, $deprecated, 27 | -moz, 28 | -webkit, 29 | not(-o), 30 | not(-ms), 31 | not(-khtml), 32 | not official 33 | ); 34 | @include experimental(background-origin, $origin, 35 | not(-moz), 36 | not(-webkit), 37 | -o, 38 | -ms, 39 | -khtml, 40 | official 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /lib/compass/css3/_background-size.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // override to change the default 4 | $default-background-size: 100% auto !default; 5 | 6 | // Set the size of background images using px, width and height, or percentages. 7 | // Currently supported in: Opera, Gecko, Webkit. 8 | // 9 | // * percentages are relative to the background-origin (default = padding-box) 10 | // * mixin defaults to: `$default-background-size` 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)); 26 | } 27 | -------------------------------------------------------------------------------- /lib/compass/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | $default-border-radius: 5px !default; 4 | 5 | // Round all corners by a specific amount, defaults to value of `$default-border-radius`. 6 | // 7 | // When two values are passed, the first is the horizontal radius 8 | // and the second is the vertical radius. 9 | // 10 | // Note: webkit does not support shorthand syntax for several corners at once. 11 | // So in the case where you pass several values only the first will be passed to webkit. 12 | // 13 | // Examples: 14 | // 15 | // .simple { @include border-radius(4px, 4px); } 16 | // .compound { @include border-radius(2px 5px, 3px 6px); } 17 | // .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)} 18 | // 19 | // Which generates: 20 | // 21 | // .simple { 22 | // -webkit-border-radius: 4px 4px; 23 | // -moz-border-radius: 4px / 4px; 24 | // -khtml-border-radius: 4px / 4px; 25 | // border-radius: 4px / 4px; } 26 | // 27 | // .compound { 28 | // -webkit-border-radius: 2px 3px; 29 | // -moz-border-radius: 2px 5px / 3px 6px; 30 | // -khtml-border-radius: 2px 5px / 3px 6px; 31 | // border-radius: 2px 5px / 3px 6px; } 32 | // 33 | // .crazy { 34 | // -webkit-border-radius: 1px 2px; 35 | // -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; 36 | // -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; 37 | // border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; } 38 | 39 | @mixin border-radius($radius: $default-border-radius, $vertical-radius: false) { 40 | 41 | @if $vertical-radius { 42 | // Webkit doesn't understand the official shorthand syntax for specifying 43 | // a vertical radius unless so in case there's several we only take the first. 44 | @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius), 45 | not(-moz), 46 | -webkit, 47 | not(-o), 48 | not(-ms), 49 | not(-khtml), 50 | not(official) 51 | ); 52 | @include experimental("border-radius", $radius unquote("/") $vertical-radius, 53 | -moz, 54 | not(-webkit), 55 | not(-o), 56 | not(-ms), 57 | -khtml, 58 | official 59 | ); 60 | } 61 | @else { 62 | @include experimental(border-radius, $radius); 63 | } 64 | } 65 | 66 | // Round radius at position by amount. 67 | // 68 | // * legal values for `$vert`: `top`, `bottom` 69 | // * legal values for `$horz`: `left`, `right` 70 | 71 | @mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) { 72 | // Support for mozilla's syntax for specifying a corner 73 | @include experimental("border-radius-#{$vert}#{$horz}", $radius, 74 | -moz, 75 | not(-webkit), 76 | not(-o), 77 | not(-ms), 78 | not(-khtml), 79 | not(official) 80 | ); 81 | @include experimental("border-#{$vert}-#{$horz}-radius", $radius, 82 | not(-moz), 83 | -webkit, 84 | not(-o), 85 | not(-ms), 86 | -khtml, 87 | official 88 | ); 89 | 90 | } 91 | 92 | // Round top-left corner only 93 | 94 | @mixin border-top-left-radius($radius: $default-border-radius) { 95 | @include border-corner-radius(top, left, $radius); } 96 | 97 | // Round top-right corner only 98 | 99 | @mixin border-top-right-radius($radius: $default-border-radius) { 100 | @include border-corner-radius(top, right, $radius); } 101 | 102 | // Round bottom-left corner only 103 | 104 | @mixin border-bottom-left-radius($radius: $default-border-radius) { 105 | @include border-corner-radius(bottom, left, $radius); } 106 | 107 | // Round bottom-right corner only 108 | 109 | @mixin border-bottom-right-radius($radius: $default-border-radius) { 110 | @include border-corner-radius(bottom, right, $radius); } 111 | 112 | // Round both top corners by amount 113 | @mixin border-top-radius($radius: $default-border-radius) { 114 | @include border-top-left-radius($radius); 115 | @include border-top-right-radius($radius); } 116 | 117 | // Round both right corners by amount 118 | @mixin border-right-radius($radius: $default-border-radius) { 119 | @include border-top-right-radius($radius); 120 | @include border-bottom-right-radius($radius); } 121 | 122 | // Round both bottom corners by amount 123 | @mixin border-bottom-radius($radius: $default-border-radius) { 124 | @include border-bottom-left-radius($radius); 125 | @include border-bottom-right-radius($radius); } 126 | 127 | // Round both left corners by amount 128 | @mixin border-left-radius($radius: $default-border-radius) { 129 | @include border-top-left-radius($radius); 130 | @include border-bottom-left-radius($radius); } 131 | -------------------------------------------------------------------------------- /lib/compass/css3/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | // @doc off 2 | // These defaults make the arguments optional for this mixin 3 | // If you like, set different defaults before importing. 4 | // @doc on 5 | 6 | @import "shared"; 7 | @import "../functions"; 8 | 9 | // The default color for box shadows 10 | $default-box-shadow-color: #333333 !default; 11 | 12 | // The default horizontal offset. Positive is to the right. 13 | $default-box-shadow-h-offset: 0px !default; 14 | 15 | // The default vertical offset. Positive is down. 16 | $default-box-shadow-v-offset: 0px !default; 17 | 18 | // The default blur length. 19 | $default-box-shadow-blur: 5px !default; 20 | 21 | // The default spread length. 22 | $default-box-shadow-spread : false !default; 23 | 24 | // The default shadow inset: inset or false (for standard shadow). 25 | $default-box-shadow-inset : false !default; 26 | 27 | // Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box 28 | // shadows are needed. 29 | // Each shadow argument should adhere to the standard css3 syntax for the 30 | // box-shadow property. 31 | @mixin box-shadow( 32 | $shadow-1 : default, 33 | $shadow-2 : false, 34 | $shadow-3 : false, 35 | $shadow-4 : false, 36 | $shadow-5 : false, 37 | $shadow-6 : false, 38 | $shadow-7 : false, 39 | $shadow-8 : false, 40 | $shadow-9 : false, 41 | $shadow-10: false 42 | ) { 43 | @if $shadow-1 == default { 44 | $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color)); 45 | } 46 | $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10); 47 | @include experimental(box-shadow, $shadow, 48 | -moz, -webkit, not(-o), not(-ms), not(-khtml), official 49 | ); 50 | } 51 | 52 | // Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3. 53 | // Includes default arguments for horizontal offset, vertical offset, blur length, spread length, color and inset. 54 | @mixin single-box-shadow( 55 | $hoff : $default-box-shadow-h-offset, 56 | $voff : $default-box-shadow-v-offset, 57 | $blur : $default-box-shadow-blur, 58 | $spread : $default-box-shadow-spread, 59 | $color : $default-box-shadow-color, 60 | $inset : $default-box-shadow-inset 61 | ) { 62 | @if not ($inset == true or $inset == false or $inset == inset) { 63 | @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset"; 64 | } 65 | 66 | @if $color == none { 67 | @include box-shadow(none); 68 | } @else { 69 | $full : $hoff $voff; 70 | @if $blur { $full: $full $blur; } 71 | @if $spread { $full: $full $spread; } 72 | @if $color { $full: $full $color; } 73 | @if $inset { $full: inset $full; } 74 | @include box-shadow($full); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /lib/compass/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // The default box-sizing model when no argument is provided to the box-sizing mixin: [ content-box | border-box | padding-box ] 4 | // 5 | // The browser default is content-box, compass defaults to border-box. 6 | $default-box-sizing: border-box !default; 7 | 8 | // Change the box model for Mozilla, Webkit, IE8 and the future 9 | // 10 | // @param $bs 11 | // [ content-box | border-box ] 12 | 13 | @mixin box-sizing($bs: $default-box-sizing) { 14 | $bs: unquote($bs); 15 | @include experimental(box-sizing, $bs, 16 | -moz, -webkit, not(-o), not(-ms), not(-khtml), official 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /lib/compass/css3/_box.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // display:box; must be used for any of the other flexbox mixins to work properly 4 | @mixin display-box { 5 | @include experimental-value(display, box, 6 | -moz, -webkit, not(-o), -ms, not(-khtml), official 7 | ); 8 | } 9 | 10 | // Default box orientation, assuming that the user wants something less block-like 11 | $default-box-orient: horizontal !default; 12 | 13 | // Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ] 14 | @mixin box-orient( 15 | $orientation: $default-box-orient 16 | ) { 17 | $orientation : unquote($orientation); 18 | @include experimental(box-orient, $orientation, 19 | -moz, -webkit, not(-o), -ms, not(-khtml), official 20 | ); 21 | } 22 | 23 | // Default box-align 24 | $default-box-align: stretch !default; 25 | 26 | // Box align [ start | end | center | baseline | stretch ] 27 | @mixin box-align( 28 | $alignment: $default-box-align 29 | ) { 30 | $alignment : unquote($alignment); 31 | @include experimental(box-align, $alignment, 32 | -moz, -webkit, not(-o), -ms, not(-khtml), official 33 | ); 34 | } 35 | 36 | // Default box flex 37 | $default-box-flex: 0 !default; 38 | 39 | // mixin which takes an int argument for box flex. Apply this to the children inside the box. 40 | // 41 | // For example: "div.display-box > div.child-box" would get the box flex mixin. 42 | @mixin box-flex( 43 | $flex: $default-box-flex 44 | ) { 45 | @include experimental(box-flex, $flex, 46 | -moz, -webkit, not(-o), -ms, not(-khtml), official 47 | ); 48 | } 49 | 50 | // Default flex group 51 | $default-box-flex-group: 1 !default; 52 | 53 | // mixin which takes an int argument for flexible grouping 54 | @mixin box-flex-group( 55 | $group: $default-box-flex-group 56 | ) { 57 | @include experimental(box-flex-group, $group, 58 | -moz, -webkit, not(-o), -ms, not(-khtml), official 59 | ); 60 | } 61 | 62 | // default for ordinal group 63 | $default-box-ordinal-group: 1 !default; 64 | 65 | // mixin which takes an int argument for ordinal grouping and rearranging the order 66 | @mixin box-ordinal-group( 67 | $group: $default-ordinal-flex-group 68 | ) { 69 | @include experimental(box-ordinal-group, $group, 70 | -moz, -webkit, not(-o), -ms, not(-khtml), official 71 | ); 72 | } 73 | 74 | // Box direction default value 75 | $default-box-direction: normal !default; 76 | 77 | // mixin for box-direction [ normal | reverse | inherit ] 78 | @mixin box-direction( 79 | $direction: $default-box-direction 80 | ) { 81 | $direction: unquote($direction); 82 | @include experimental(box-direction, $direction, 83 | -moz, -webkit, not(-o), -ms, not(-khtml), official 84 | ); 85 | } 86 | 87 | // default for box lines 88 | $default-box-lines: single !default; 89 | 90 | // mixin for box lines [ single | multiple ] 91 | @mixin box-lines( 92 | $lines: $default-box-lines 93 | ) { 94 | $lines: unquote($lines); 95 | @include experimental(box-lines, $lines, 96 | -moz, -webkit, not(-o), -ms, not(-khtml), official 97 | ); 98 | } 99 | 100 | // default for box pack 101 | $default-box-pack: start !default; 102 | 103 | // mixin for box pack [ start | end | center | justify ] 104 | @mixin box-pack( 105 | $pack: $default-box-pack 106 | ) { 107 | $pack: unquote($pack); 108 | @include experimental(box-pack, $pack, 109 | -moz, -webkit, not(-o), -ms, not(-khtml), official 110 | ); 111 | } -------------------------------------------------------------------------------- /lib/compass/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | @import "../functions"; 3 | 4 | // Specify the shorthand `columns` property. 5 | // 6 | // Example: 7 | // 8 | // @include columns(20em 2) 9 | @mixin columns($width-and-count) { 10 | @include experimental(columns, $width-and-count, 11 | -moz, -webkit, -o, -ms, not(-khtml), official 12 | ); 13 | } 14 | 15 | // Specify the number of columns 16 | @mixin column-count($count) { 17 | @include experimental(column-count, $count, 18 | -moz, -webkit, -o, -ms, not(-khtml), official 19 | ); 20 | } 21 | 22 | // Specify the gap between columns e.g. `20px` 23 | @mixin column-gap($width) { 24 | @include experimental(column-gap, $width, 25 | -moz, -webkit, -o, -ms, not(-khtml), official 26 | ); 27 | } 28 | 29 | // Specify the width of columns e.g. `100px` 30 | @mixin column-width($width) { 31 | @include experimental(column-width, $width, 32 | -moz, -webkit, -o, -ms, not(-khtml), official 33 | ); 34 | } 35 | 36 | // Specify how many columns an element should span across. 37 | // * legal values are none, all 38 | @mixin column-span($columns) { 39 | @include experimental(column-span, $columns, 40 | -moz, -webkit, -o, -ms, not(-khtml), official 41 | ); 42 | } 43 | 44 | // Specify the width of the rule between columns e.g. `1px` 45 | @mixin column-rule-width($width) { 46 | @include experimental(column-rule-width, $width, 47 | -moz, -webkit, -o, -ms, not(-khtml), official 48 | ); 49 | } 50 | 51 | // Specify the style of the rule between columns e.g. `dotted`. 52 | // This works like border-style. 53 | @mixin column-rule-style($style) { 54 | @include experimental(column-rule-style, unquote($style), 55 | -moz, -webkit, -o, -ms, not(-khtml), official 56 | ); 57 | } 58 | 59 | // Specify the color of the rule between columns e.g. `blue`. 60 | // This works like border-color. 61 | @mixin column-rule-color($color) { 62 | @include experimental(column-rule-color, $color, 63 | -moz, -webkit, -o, -ms, not(-khtml), official 64 | ); 65 | } 66 | 67 | // Mixin encompassing all column rule properties 68 | // For example: 69 | // 70 | // @include column-rule(1px, solid, #c00) 71 | // 72 | // Or the values can be space separated: 73 | // 74 | // @include column-rule(1px solid #c00) 75 | @mixin column-rule($width, $style: false, $color: false) { 76 | $full : -compass-space-list(compact($width, $style, $color)); 77 | @include experimental(column-rule, $full, 78 | -moz, -webkit, -o, -ms, not(-khtml), official 79 | ); 80 | } 81 | 82 | // Mixin for setting column-break-before 83 | // 84 | // * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column 85 | // 86 | // Example: 87 | // h2.before {@include column-break-before(always);} 88 | // 89 | // Which generates: 90 | // 91 | // h2.before { 92 | // -webkit-column-break-before: always; 93 | // column-break-before: always;} 94 | @mixin column-break-before($value: auto){ 95 | @include experimental(column-break-before, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official ); 96 | } 97 | 98 | // Mixin for setting column-break-after 99 | // 100 | // * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column 101 | // 102 | // Example: 103 | // h2.after {@include column-break-after(always); } 104 | // 105 | // Which generates: 106 | // 107 | // h2.after { 108 | // -webkit-column-break-after: always; 109 | // column-break-after: always; } 110 | @mixin column-break-after($value: auto){ 111 | @include experimental(column-break-after, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official ); 112 | } 113 | 114 | // Mixin for setting column-break-inside 115 | // 116 | // * legal values are auto, avoid, avoid-page, avoid-column 117 | // 118 | // Example: 119 | // h2.inside {@include column-break-inside();} 120 | // Which generates: 121 | // 122 | // h2.inside { 123 | // -webkit-column-break-inside: auto; 124 | // column-break-inside: auto;} 125 | @mixin column-break-inside($value: auto){ 126 | @include experimental(column-break-inside, $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official ); 127 | } 128 | 129 | // All-purpose mixin for setting column breaks. 130 | // 131 | // * legal values for $type : before, after, inside 132 | // * legal values for '$value' are dependent on $type 133 | // * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column 134 | // * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column 135 | // * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column 136 | // 137 | // Examples: 138 | // h2.before {@include column-break(before, always);} 139 | // h2.after {@include column-break(after, always); } 140 | // h2.inside {@include column-break(inside); } 141 | // 142 | // Which generates: 143 | // h2.before { 144 | // -webkit-column-break-before: always; 145 | // column-break-before: always;} 146 | // 147 | // h2.after { 148 | // -webkit-column-break-after: always; 149 | // column-break-after: always; } 150 | // 151 | // h2.inside { 152 | // -webkit-column-break-inside: auto; 153 | // column-break-inside: auto;} 154 | 155 | @mixin column-break($type: before, $value: auto){ 156 | @include experimental("column-break-#{$type}", $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official ); 157 | } 158 | -------------------------------------------------------------------------------- /lib/compass/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | @import "../functions"; 3 | 4 | // Provides cross-browser support for the upcoming (?) css3 filter property. 5 | // 6 | // Each filter argument should adhere to the standard css3 syntax for the 7 | // filter property. 8 | @mixin filter ( 9 | $filter-1, 10 | $filter-2 : false, 11 | $filter-3 : false, 12 | $filter-4 : false, 13 | $filter-5 : false, 14 | $filter-6 : false, 15 | $filter-7 : false, 16 | $filter-8 : false, 17 | $filter-9 : false, 18 | $filter-10: false 19 | ) { 20 | $filter : compact($filter-1, $filter-2, $filter-3, $filter-4, $filter-5, $filter-6, $filter-7, $filter-8, $filter-9, $filter-10); 21 | @include experimental(filter, $filter, 22 | -moz, -webkit, not(-o), not(-ms), not(-khtml), official 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /lib/compass/css3/_flexbox.scss: -------------------------------------------------------------------------------- 1 | @import "../support"; 2 | @import "shared"; 3 | 4 | // This is the underlying implementation for all the other mixins in this module. 5 | // It is the only way to access prefix support for older versions of the spec. 6 | // Deviates from canonical Compass implementation by dropping support for 7 | // older versions of the Flexbox spec. 8 | // 9 | // `$properties`: map of property-value pairs that should be prefixed 10 | @mixin flexbox($properties) { 11 | @each $prop, $value in $properties { 12 | @if $prop == display { 13 | @include experimental-value(display, $value, not(-moz), -webkit, 14 | not(-o), not(-ms), not(-khtml), official); 15 | } @else { 16 | @include experimental($prop, $value, not(-moz), -webkit, not(-o), 17 | not(-ms), not(-khtml), official); 18 | } 19 | } 20 | } 21 | 22 | // Values for $display are: flex (default), inline-flex 23 | @mixin display-flex($display: flex) { 24 | @include flexbox((display: $display)); 25 | } 26 | 27 | // Values: row | row-reverse | column | column-reverse 28 | @mixin flex-direction($direction) { 29 | @include flexbox((flex-direction: $direction)); 30 | } 31 | 32 | // Values: nowrap | wrap | wrap-reverse 33 | @mixin flex-wrap($wrap) { 34 | @include flexbox((flex-wrap: $wrap)); 35 | } 36 | 37 | // Shorthand for flex-direction and flex-wrap. 38 | @mixin flex-flow($flow) { 39 | @include flexbox((flex-flow: $flow)); 40 | } 41 | 42 | // Accepts an integer 43 | @mixin order($order) { 44 | @include flexbox((order: $order)); 45 | } 46 | 47 | // Shorthand for flex-grow, flex-shrink and optionally flex-basis. 48 | // Space separated, in that order. 49 | @mixin flex($flex) { 50 | @include flexbox((flex: $flex)); 51 | } 52 | 53 | // Accepts a number. 54 | @mixin flex-grow($flex-grow) { 55 | @include flexbox((flex-grow: $flex-grow)); 56 | } 57 | 58 | // Accepts a number. 59 | @mixin flex-shrink($flex-shrink) { 60 | @include flexbox((flex-shrink: $flex-shrink)); 61 | } 62 | 63 | // Accepts any legal value for the width property. 64 | @mixin flex-basis($flex-basis) { 65 | @include flexbox((flex-basis: $flex-basis)); 66 | } 67 | 68 | // Legal values: flex-start | flex-end | center | space-between | space-around 69 | @mixin justify-content($justify-content) { 70 | @include flexbox((justify-content: $justify-content)); 71 | } 72 | 73 | // Legal values: flex-start | flex-end | center | baseline | stretch 74 | @mixin align-items($align-items) { 75 | @include flexbox((align-items: $align-items)); 76 | } 77 | 78 | // Legal values: auto | flex-start | flex-end | center | baseline | stretch 79 | @mixin align-self($align-self) { 80 | @include flexbox((align-self: $align-self)); 81 | } 82 | 83 | // Legal values: flex-start | flex-end | center | space-between | space-around | stretch 84 | @mixin align-content($align-content) { 85 | @include flexbox((align-content: $align-content)); 86 | } 87 | -------------------------------------------------------------------------------- /lib/compass/css3/_font-face.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera. 4 | // 5 | // * $name is required, arbitrary, and what you will use in font stacks. 6 | // * $font-files is required using font-files('relative/location', 'format'). 7 | // for best results use this order: woff, opentype/truetype, svg 8 | // * $eot is required by IE, and is a relative location of the eot file. 9 | // * $weight shows if the font is bold, defaults to normal 10 | // * $style defaults to normal, might be also italic 11 | // * For android 2.2 Compatiblity, please ensure that your web page has 12 | // a meta viewport tag. 13 | // * To support iOS < 4.2, an SVG file must be provided 14 | // 15 | // If you need to generate other formats check out the Font Squirrel 16 | // [font generator](http://www.fontsquirrel.com/fontface/generator) 17 | // 18 | 19 | // In order to refer to a specific style of the font in your stylesheets as 20 | // e.g. "font-style: italic;", you may add a couple of @font-face includes 21 | // containing the respective font files for each style and specying 22 | // respective the $style parameter. 23 | 24 | // Order of the includes matters, and it is: normal, bold, italic, bold+italic. 25 | 26 | @mixin font-face( 27 | $name, 28 | $font-files, 29 | $eot: false, 30 | $weight: false, 31 | $style: false 32 | ) { 33 | $iefont: unquote("#{$eot}?#iefix"); 34 | @font-face { 35 | font-family: quote($name); 36 | @if $eot { 37 | src: font-url($eot); 38 | $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 39 | } 40 | src: $font-files; 41 | @if $weight { 42 | font-weight: $weight; 43 | } 44 | @if $style { 45 | font-style: $style; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/compass/css3/_hyphenation.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // Mixins to support specific CSS Text Level 3 elements 4 | // 5 | // 6 | // 7 | // Mixin for word-break properties 8 | // http://www.w3.org/css3-text/#word-break 9 | // * legal values for $type : normal, keep-all, break-all 10 | // 11 | // Example: 12 | // p.wordBreak {@include word-break(break-all);} 13 | // 14 | // Which generates: 15 | // p.wordBreak { 16 | // -ms-word-break: break-all; 17 | // word-break: break-all; 18 | // word-break: break-word;} 19 | // 20 | @mixin word-break($value: normal){ 21 | @if $value == break-all { 22 | //Most browsers handle the break-all case the same... 23 | @include experimental(word-break, $value, 24 | not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official 25 | ); 26 | //Webkit handles break-all differently... as break-word 27 | @include experimental(word-break, break-word, 28 | not(-moz), not(-webkit), not(-o), not(-ms), not(-khtml), official 29 | ); 30 | } 31 | @else { 32 | @include experimental(word-break, $value, 33 | not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official 34 | ); 35 | } 36 | } 37 | 38 | // Mixin for the hyphens property 39 | // 40 | // W3C specification: http://www.w3.org/TR/css3-text/#hyphens 41 | // * legal values for $type : auto, manual, none 42 | // 43 | // Example: 44 | // p { 45 | // @include hyphens(auto);} 46 | // Which generates: 47 | // p { 48 | // -moz-hyphens: auto; 49 | // -webkit-hyphens: auto; 50 | // hyphens: auto;} 51 | // 52 | @mixin hyphens($value: auto){ 53 | @include experimental(hyphens, $value, 54 | -moz, -webkit, not(-o), not(-ms), not(-khtml), official 55 | ); 56 | } 57 | 58 | // Mixin for x-browser hyphenation based on @auchenberg's post: 59 | // Removes the need for the HTML tag 60 | // http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ 61 | // 62 | // Example: 63 | // div {@include hyphenation;} 64 | // 65 | // Which generates: 66 | // div { 67 | // -ms-word-break: break-all; 68 | // word-break: break-all; 69 | // word-break: break-word; 70 | // -moz-hyphens: auto; 71 | // -webkit-hyphens: auto; 72 | // hyphens: auto;} 73 | // 74 | @mixin hyphenation{ 75 | @include word-break(break-all); 76 | @include hyphens; 77 | } 78 | -------------------------------------------------------------------------------- /lib/compass/css3/_images.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | @import "../utilities/general/hacks"; 3 | @import "../functions"; 4 | 5 | // Background property support for vendor prefixing within values. 6 | @mixin background( 7 | $background-1, 8 | $background-2: false, 9 | $background-3: false, 10 | $background-4: false, 11 | $background-5: false, 12 | $background-6: false, 13 | $background-7: false, 14 | $background-8: false, 15 | $background-9: false, 16 | $background-10: false 17 | ) { 18 | $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, 19 | $background-6, $background-7, $background-8, $background-9, $background-10); 20 | $mult-bgs: -compass-list-size($backgrounds) > 1; 21 | $add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs; 22 | @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); } 23 | @if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) { background: -owg($backgrounds); } 24 | @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); } 25 | @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); } 26 | @if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); } 27 | @if $experimental-support-for-pie and $add-pie-bg { -pie-background: $backgrounds ; } 28 | background: $backgrounds ; 29 | } 30 | 31 | @mixin background-with-css2-fallback( 32 | $background-1, 33 | $background-2: false, 34 | $background-3: false, 35 | $background-4: false, 36 | $background-5: false, 37 | $background-6: false, 38 | $background-7: false, 39 | $background-8: false, 40 | $background-9: false, 41 | $background-10: false 42 | ) { 43 | $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, 44 | $background-6, $background-7, $background-8, $background-9, $background-10); 45 | $mult-bgs: -compass-list-size($backgrounds) > 1; 46 | $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false); 47 | @if not(blank($simple-background)) { background: $simple-background; } 48 | @include background($background-1, $background-2, $background-3, $background-4, $background-5, 49 | $background-6, $background-7, $background-8, $background-9, $background-10); 50 | } 51 | 52 | 53 | // Background image property support for vendor prefixing within values. 54 | @mixin background-image( 55 | $image-1, 56 | $image-2: false, 57 | $image-3: false, 58 | $image-4: false, 59 | $image-5: false, 60 | $image-6: false, 61 | $image-7: false, 62 | $image-8: false, 63 | $image-9: false, 64 | $image-10: false 65 | ) { 66 | $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10); 67 | $add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1; 68 | 69 | @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; } 70 | @if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); } 71 | @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); } 72 | @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); } 73 | @if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); } 74 | @if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." } 75 | background-image: $images ; 76 | } 77 | 78 | // Emit a IE-Specific filters that renders a simple linear gradient. 79 | // For use in IE 6 - 8. Best practice would have you apply this via a 80 | // conditional IE stylesheet, but if you must, you should place this before 81 | // any background-image properties that you have specified. 82 | // 83 | // For the `$orientation` parameter, you can pass `vertical` or `horizontal`. 84 | @mixin filter-gradient($start-color, $end-color, $orientation: vertical) { 85 | @include has-layout; 86 | $gradient-type: if($orientation == vertical, 0, 1); 87 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 { 88 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}'); 89 | } 90 | } 91 | 92 | 93 | // Border image property support for vendor prefixing properties and values. 94 | @mixin border-image($value) { 95 | @if $experimental-support-for-mozilla { -moz-border-image: -moz(reject(-compass-list($value), fill)); } 96 | @if $support-for-original-webkit-gradients { -webkit-border-image: -owg(reject(-compass-list($value), fill)); } 97 | @if $experimental-support-for-webkit { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); } 98 | @if $experimental-support-for-opera { -o-border-image: -o(reject(-compass-list($value), fill)); } 99 | @if $experimental-support-for-svg { border-image: -svg(reject(-compass-list($value), fill)); } 100 | border-image: $value; 101 | } 102 | 103 | // List style image property support for vendor prefixing within values. 104 | @mixin 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 ; 111 | } 112 | 113 | // List style property support for vendor prefixing within values. 114 | @mixin list-style($value) { 115 | $value: -compass-list($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 ; 122 | } 123 | 124 | // content property support for vendor prefixing within values. 125 | @mixin content($value) { 126 | $value: -compass-list($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 ; 133 | } 134 | -------------------------------------------------------------------------------- /lib/compass/css3/_inline-block.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // Set `$inline-block-alignment` to `none` or `false` to disable the output 4 | // of a vertical-align property in the inline-block mixin. 5 | // Or set it to a legal value for `vertical-align` to change the default. 6 | $inline-block-alignment: middle !default; 7 | 8 | // Provides a cross-browser method to implement `display: inline-block;` 9 | @mixin inline-block($alignment: $inline-block-alignment) { 10 | @if $legacy-support-for-mozilla { 11 | display: -moz-inline-stack; 12 | } 13 | display: inline-block; 14 | @if $alignment and $alignment != none { 15 | vertical-align: $alignment; 16 | } 17 | @if $legacy-support-for-ie { 18 | *vertical-align: auto; 19 | zoom: 1; 20 | *display: inline; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /lib/compass/css3/_opacity.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity. 4 | // 5 | // @param $opacity 6 | // A number between 0 and 1, where 0 is transparent and 1 is opaque. 7 | 8 | @mixin opacity($opacity) { 9 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 { 10 | filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})"); 11 | } 12 | opacity: $opacity; 13 | } 14 | 15 | // Make an element completely transparent. 16 | @mixin transparent { @include opacity(0); } 17 | 18 | // Make an element completely opaque. 19 | @mixin opaque { @include opacity(1); } 20 | -------------------------------------------------------------------------------- /lib/compass/css3/_pie.scss: -------------------------------------------------------------------------------- 1 | $experimental-support-for-pie: true !default; 2 | 3 | // It is recommended that you use Sass's @extend directive to apply the behavior 4 | // to your PIE elements. To assist you, Compass provides this variable. 5 | // When set, it will cause the `@include pie` mixin to extend this class. 6 | // The class name you provide should **not** include the `.`. 7 | $pie-base-class: false !default; 8 | 9 | // The default approach to using PIE. 10 | // Can be one of: 11 | // 12 | // * relative (default) 13 | // * z-index 14 | // * none 15 | $pie-default-approach: relative !default; 16 | 17 | // The location of your PIE behavior file 18 | // This should be root-relative to your web server 19 | // relative assets don't work. It is recommended that 20 | // you set this yourself. 21 | $pie-behavior: stylesheet-url("PIE.htc") !default; 22 | 23 | // When using the z-index approach, the 24 | // first ancestor of the PIE element at 25 | // or before the container's opaque background 26 | // should have a z-index set as well to ensure 27 | // propert z-index stacking. 28 | // 29 | // The `$position` argument must be some non-static 30 | // value (absolute, relative, etc.) 31 | @mixin pie-container($z-index: 0, $position: relative) { 32 | z-index: $z-index; 33 | position: $position; 34 | } 35 | 36 | // PIE elements must have this behavior attached to them. 37 | // IE is broken -- it doesn't think of behavior urls as 38 | // relative to the stylesheet. It considers them relative 39 | // to the webpage. As a result, you cannot reliably use 40 | // compass's relative_assets with PIE. 41 | // 42 | // * `$approach` - one of: relative, z-index, or none 43 | // * `$z-index` - when using the z-index approach, this 44 | // is the z-index that is applied. 45 | @mixin pie-element( 46 | $approach: $pie-default-approach, 47 | $z-index: 0 48 | ) { 49 | behavior: $pie-behavior; 50 | @if $approach == relative { 51 | position: relative; 52 | } 53 | @else if $approach == z-index { 54 | z-index: $z-index; 55 | } 56 | } 57 | 58 | // a smart mixin that knows to extend or include pie-element according 59 | // to your stylesheet's configuration variables. 60 | @mixin pie($base-class: $pie-base-class) { 61 | @if $base-class { 62 | @extend .#{$base-class}; 63 | } 64 | @else { 65 | @include pie-element; 66 | } 67 | } 68 | 69 | // Watch `$n` levels of ancestors for changes to their class attribute 70 | // So that cascading styles will work correctly on the PIE element. 71 | @mixin pie-watch-ancestors($n) { 72 | -pie-watch-ancestors: $n; 73 | } 74 | -------------------------------------------------------------------------------- /lib/compass/css3/_regions.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | // Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/) 4 | // 5 | // $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property. 6 | // 7 | // For a visual explanation, see the diagrams at Chris Coyier's 8 | // [CSS-Tricks](http://css-tricks.com/content-folding/) 9 | 10 | @mixin flow-into($target) { 11 | $target: unquote($target); 12 | @include experimental(flow-into, $target, 13 | not(-moz), -webkit, not(-o), -ms, not(-khtml), not official 14 | ); 15 | } 16 | 17 | @mixin flow-from($target) { 18 | $target: unquote($target); 19 | @include experimental(flow-from, $target, 20 | not(-moz), -webkit, not(-o), -ms, not(-khtml), not official 21 | ); 22 | } -------------------------------------------------------------------------------- /lib/compass/css3/_shared.scss: -------------------------------------------------------------------------------- 1 | @import "../support"; 2 | 3 | // This mixin provides basic support for CSS3 properties and 4 | // their corresponding experimental CSS2 properties when 5 | // the implementations are identical except for the property 6 | // prefix. 7 | @mixin experimental($property, $value, 8 | $moz : $experimental-support-for-mozilla, 9 | $webkit : $experimental-support-for-webkit, 10 | $o : $experimental-support-for-opera, 11 | $ms : $experimental-support-for-microsoft, 12 | $khtml : $experimental-support-for-khtml, 13 | $official : true 14 | ) { 15 | @if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; } 16 | @if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; } 17 | @if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; } 18 | @if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; } 19 | @if $o and $experimental-support-for-opera { -o-#{$property} : $value; } 20 | @if $official { #{$property} : $value; } 21 | } 22 | 23 | // Same as experimental(), but for cases when the property is the same and the value is vendorized 24 | @mixin experimental-value($property, $value, 25 | $moz : $experimental-support-for-mozilla, 26 | $webkit : $experimental-support-for-webkit, 27 | $o : $experimental-support-for-opera, 28 | $ms : $experimental-support-for-microsoft, 29 | $khtml : $experimental-support-for-khtml, 30 | $official : true 31 | ) { 32 | @if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; } 33 | @if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; } 34 | @if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; } 35 | @if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; } 36 | @if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; } 37 | @if $official { #{$property} : #{$value}; } 38 | } 39 | -------------------------------------------------------------------------------- /lib/compass/css3/_text-shadow.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | @import "../functions"; 3 | 4 | // These defaults make the arguments optional for this mixin 5 | // If you like, set different defaults in your project 6 | 7 | $default-text-shadow-color: #aaa !default; 8 | $default-text-shadow-h-offset: 0px !default; 9 | $default-text-shadow-v-offset: 0px !default; 10 | $default-text-shadow-blur: 1px !default; 11 | $default-text-shadow-spread: false !default; 12 | 13 | // Provides cross-browser text shadows when one or more shadows are needed. 14 | // Each shadow argument should adhere to the standard css3 syntax for the 15 | // text-shadow property. 16 | // 17 | // Note: if any shadow has a spread parameter, this will cause the mixin 18 | // to emit the shadow declaration twice, first without the spread, 19 | // then with the spread included. This allows you to progressively 20 | // enhance the browsers that do support the spread parameter. 21 | @mixin text-shadow( 22 | $shadow-1 : default, 23 | $shadow-2 : false, 24 | $shadow-3 : false, 25 | $shadow-4 : false, 26 | $shadow-5 : false, 27 | $shadow-6 : false, 28 | $shadow-7 : false, 29 | $shadow-8 : false, 30 | $shadow-9 : false, 31 | $shadow-10: false 32 | ) { 33 | @if $shadow-1 == default { 34 | $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color); 35 | } 36 | $shadows-without-spread: join((),(),comma); 37 | $shadows: join((),(),comma); 38 | $has-spread: false; 39 | @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, 40 | $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) { 41 | @if length($shadow) > 4 { 42 | $has-spread: true; 43 | $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5)); 44 | $shadows: append($shadows, $shadow); 45 | } else { 46 | $shadows-without-spread: append($shadows-without-spread, $shadow); 47 | $shadows: append($shadows, $shadow); 48 | } 49 | } 50 | @if $has-spread { 51 | text-shadow: $shadows-without-spread; 52 | } 53 | text-shadow: $shadows; 54 | } 55 | 56 | // Provides a single cross-browser CSS text shadow. 57 | // 58 | // Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread 59 | // according to the configuration defaults above. 60 | @mixin single-text-shadow( 61 | $hoff: false, 62 | $voff: false, 63 | $blur: false, 64 | $spread: false, 65 | $color: false 66 | ) { 67 | // A lot of people think the color comes first. It doesn't. 68 | @if type-of($hoff) == color { 69 | $temp-color: $hoff; 70 | $hoff: $voff; 71 | $voff: $blur; 72 | $blur: $spread; 73 | $spread: $color; 74 | $color: $temp-color; 75 | } 76 | // Can't rely on default assignment with multiple supported argument orders. 77 | $hoff: if($hoff, $hoff, $default-text-shadow-h-offset); 78 | $voff: if($voff, $voff, $default-text-shadow-v-offset); 79 | $blur: if($blur, $blur, $default-text-shadow-blur ); 80 | $spread: if($spread, $spread, $default-text-shadow-spread ); 81 | $color: if($color, $color, $default-text-shadow-color ); 82 | // We don't need experimental support for this property. 83 | @if $color == none or $hoff == none { 84 | @include text-shadow(none); 85 | } @else { 86 | @include text-shadow(compact($hoff $voff $blur $spread $color)); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /lib/compass/css3/_transform-legacy.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | 3 | @warn "This version of the transform module has been deprecated and will be removed."; 4 | 5 | // CSS Transform and Transform-Origin 6 | 7 | // Apply a transform sent as a complete string. 8 | 9 | @mixin apply-transform($transform) { 10 | @include experimental(transform, $transform, 11 | -moz, -webkit, -o, not(-ms), not(-khtml), official 12 | ); 13 | } 14 | 15 | // Apply a transform-origin sent as a complete string. 16 | 17 | @mixin apply-origin($origin) { 18 | @include experimental(transform-origin, $origin, 19 | -moz, -webkit, -o, not(-ms), not(-khtml), official 20 | ); 21 | } 22 | 23 | // transform-origin requires x and y coordinates 24 | // 25 | // * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely 26 | 27 | @mixin transform-origin($originx: 50%, $originy: 50%) { 28 | @if $originx or $originy { 29 | @if $originy { 30 | @include apply-origin($originx or 50% $originy); 31 | } @else { 32 | @include apply-origin($originx); 33 | } 34 | } 35 | } 36 | 37 | // A full transform mixin with everything you could want 38 | // 39 | // * including origin adjustments if you want them 40 | // * scale, rotate and skew require units of degrees(deg) 41 | // * scale takes a multiplier, rotate and skew take degrees 42 | 43 | @mixin transform( 44 | $scale: 1, 45 | $rotate: 0deg, 46 | $transx: 0, 47 | $transy: 0, 48 | $skewx: 0deg, 49 | $skewy: 0deg, 50 | $originx: false, 51 | $originy: false 52 | ) { 53 | $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy); 54 | @include apply-transform($transform); 55 | @include transform-origin($originx, $originy); 56 | } 57 | 58 | // Transform Partials 59 | // 60 | // These work well on their own, but they don't add to each other, they override. 61 | // Use them with extra origin args, or along side +transform-origin 62 | 63 | // Adjust only the scale, with optional origin coordinates 64 | 65 | @mixin scale($scale: 1.25, $originx: false, $originy: false) { 66 | @include apply-transform(scale($scale)); 67 | @include transform-origin($originx, $originy); 68 | } 69 | 70 | // Adjust only the rotation, with optional origin coordinates 71 | 72 | @mixin rotate($rotate: 45deg, $originx: false, $originy: false) { 73 | @include apply-transform(rotate($rotate)); 74 | @include transform-origin($originx, $originy); 75 | } 76 | 77 | // Adjust only the translation 78 | 79 | @mixin translate($transx: 0, $transy: 0) { 80 | @include apply-transform(translate($transx, $transy)); 81 | } 82 | 83 | // Adjust only the skew, with optional origin coordinates 84 | @mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) { 85 | @include apply-transform(skew($skewx, $skewy)); 86 | @include transform-origin($originx, $originy); 87 | } 88 | -------------------------------------------------------------------------------- /lib/compass/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | @import "shared"; 2 | @import "../functions"; 3 | 4 | // CSS Transitions 5 | // Currently only works in Webkit. 6 | // 7 | // * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3 8 | // * We'll be prepared. 9 | // 10 | // Including this submodule sets following defaults for the mixins: 11 | // 12 | // $default-transition-property : all 13 | // $default-transition-duration : 1s 14 | // $default-transition-function : false 15 | // $default-transition-delay : false 16 | // 17 | // Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s). 18 | 19 | $default-transition-property: all !default; 20 | 21 | $default-transition-duration: 1s !default; 22 | 23 | $default-transition-function: false !default; 24 | 25 | $default-transition-delay: false !default; 26 | 27 | $transitionable-prefixed-values: transform, transform-origin !default; 28 | 29 | // One or more properties to transition 30 | // 31 | // * for multiple, use a comma-delimited list 32 | // * also accepts "all" or "none" 33 | 34 | @mixin transition-property($property-1: $default-transition-property, 35 | $property-2 : false, 36 | $property-3 : false, 37 | $property-4 : false, 38 | $property-5 : false, 39 | $property-6 : false, 40 | $property-7 : false, 41 | $property-8 : false, 42 | $property-9 : false, 43 | $property-10: false 44 | ) { 45 | @if type-of($property-1) == string { $property-1: unquote($property-1); } 46 | $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10); 47 | @if $experimental-support-for-webkit { -webkit-transition-property : prefixed-for-transition(-webkit, $properties); } 48 | @if $experimental-support-for-mozilla { -moz-transition-property : prefixed-for-transition(-moz, $properties); } 49 | @if $experimental-support-for-opera { -o-transition-property : prefixed-for-transition(-o, $properties); } 50 | transition-property : $properties; 51 | } 52 | 53 | // One or more durations in seconds 54 | // 55 | // * for multiple, use a comma-delimited list 56 | // * these durations will affect the properties in the same list position 57 | 58 | @mixin transition-duration($duration-1: $default-transition-duration, 59 | $duration-2 : false, 60 | $duration-3 : false, 61 | $duration-4 : false, 62 | $duration-5 : false, 63 | $duration-6 : false, 64 | $duration-7 : false, 65 | $duration-8 : false, 66 | $duration-9 : false, 67 | $duration-10: false 68 | ) { 69 | @if type-of($duration-1) == string { $duration-1: unquote($duration-1); } 70 | $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10); 71 | @include experimental(transition-duration, $durations, 72 | -moz, -webkit, -o, not(-ms), not(-khtml), official 73 | ); 74 | } 75 | 76 | // One or more timing functions 77 | // 78 | // * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)] 79 | // * For multiple, use a comma-delimited list 80 | // * These functions will effect the properties in the same list position 81 | 82 | @mixin transition-timing-function($function-1: $default-transition-function, 83 | $function-2 : false, 84 | $function-3 : false, 85 | $function-4 : false, 86 | $function-5 : false, 87 | $function-6 : false, 88 | $function-7 : false, 89 | $function-8 : false, 90 | $function-9 : false, 91 | $function-10: false 92 | ) { 93 | $function-1: unquote($function-1); 94 | $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10); 95 | @include experimental(transition-timing-function, $functions, 96 | -moz, -webkit, -o, not(-ms), not(-khtml), official 97 | ); 98 | } 99 | 100 | // One or more transition-delays in seconds 101 | // 102 | // * for multiple, use a comma-delimited list 103 | // * these delays will effect the properties in the same list position 104 | 105 | @mixin transition-delay($delay-1: $default-transition-delay, 106 | $delay-2 : false, 107 | $delay-3 : false, 108 | $delay-4 : false, 109 | $delay-5 : false, 110 | $delay-6 : false, 111 | $delay-7 : false, 112 | $delay-8 : false, 113 | $delay-9 : false, 114 | $delay-10: false 115 | ) { 116 | @if type-of($delay-1) == string { $delay-1: unquote($delay-1); } 117 | $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10); 118 | @include experimental(transition-delay, $delays, 119 | -moz, -webkit, -o, not(-ms), not(-khtml), official 120 | ); 121 | } 122 | 123 | // Transition all-in-one shorthand 124 | 125 | @mixin single-transition( 126 | $property: $default-transition-property, 127 | $duration: $default-transition-duration, 128 | $function: $default-transition-function, 129 | $delay: $default-transition-delay 130 | ) { 131 | @include transition(compact($property $duration $function $delay)); 132 | } 133 | 134 | @mixin transition( 135 | $transition-1 : default, 136 | $transition-2 : false, 137 | $transition-3 : false, 138 | $transition-4 : false, 139 | $transition-5 : false, 140 | $transition-6 : false, 141 | $transition-7 : false, 142 | $transition-8 : false, 143 | $transition-9 : false, 144 | $transition-10: false 145 | ) { 146 | @if $transition-1 == default { 147 | $transition-1 : compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay); 148 | } 149 | $transitions: false; 150 | @if type-of($transition-1) == list and type-of(nth($transition-1,1)) == list { 151 | $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma); 152 | } @else { 153 | $transitions : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10); 154 | } 155 | $delays: comma-list(); 156 | $has-delays: false; 157 | $webkit-value: comma-list(); 158 | $moz-value: comma-list(); 159 | $o-value: comma-list(); 160 | 161 | // This block can be made considerably simpler at the point in time that 162 | // we no longer need to deal with the differences in how delays are treated. 163 | @each $transition in $transitions { 164 | // Extract the values from the list 165 | // (this would be cleaner if nth took a 3rd argument to provide a default value). 166 | $property: nth($transition, 1); 167 | $duration: false; 168 | $timing-function: false; 169 | $delay: false; 170 | @if length($transition) > 1 { $duration: nth($transition, 2); } 171 | @if length($transition) > 2 { $timing-function: nth($transition, 3); } 172 | @if length($transition) > 3 { $delay: nth($transition, 4); $has-delays: true; } 173 | 174 | // If a delay is provided without a timing function 175 | @if is-time($timing-function) and not($delay) { $delay: $timing-function; $timing-function: false; $has-delays: true; } 176 | 177 | // Keep a list of delays in case one is specified 178 | $delays: append($delays, if($delay, $delay, 0s)); 179 | 180 | $webkit-value: append($webkit-value, compact((prefixed-for-transition(-webkit, $property) $duration $timing-function)...)); 181 | $moz-value: append( $moz-value, compact((prefixed-for-transition( -moz, $property) $duration $timing-function $delay)...)); 182 | $o-value: append( $o-value, compact((prefixed-for-transition( -o, $property) $duration $timing-function $delay)...)); 183 | } 184 | 185 | @if $experimental-support-for-webkit { -webkit-transition : $webkit-value; 186 | // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it. 187 | @if $has-delays { -webkit-transition-delay : $delays; } } 188 | @if $experimental-support-for-mozilla { -moz-transition : $moz-value; } 189 | @if $experimental-support-for-opera { -o-transition : $o-value; } 190 | transition : $transitions; 191 | } 192 | 193 | // coerce a list to be comma delimited or make a new, empty comma delimited list. 194 | @function comma-list($list: ()) { 195 | @return join((), $list, comma); 196 | } 197 | 198 | // Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`. 199 | @function prefixed-for-transition($prefix, $property) { 200 | @if type-of($property) == list { 201 | $new-list: comma-list(); 202 | @each $v in $property { 203 | $new-list: append($new-list, prefixed-for-transition($prefix, $v)); 204 | } 205 | @return $new-list; 206 | } @else { 207 | @if index($transitionable-prefixed-values, $property) { 208 | @return #{$prefix}-#{$property}; 209 | } @else { 210 | @return $property; 211 | } 212 | } 213 | } 214 | 215 | // Checks if the value given is a unit of time. 216 | @function is-time($value) { 217 | @if type-of($value) == number { 218 | @return not(not(index(s ms, unit($value)))); 219 | } @else { 220 | @return false; 221 | } 222 | } 223 | -------------------------------------------------------------------------------- /lib/compass/css3/_user-interface.scss: -------------------------------------------------------------------------------- 1 | // User Interface ------------------------------------------------------------ 2 | // This file can be expanded to handle all the user interface properties as 3 | // they become available in browsers: 4 | // http://www.w3.org/TR/2000/WD-css3-userint-20000216 5 | @import "shared"; 6 | 7 | 8 | // This property controls the selection model and granularity of an element. 9 | // 10 | // @param $select 11 | // [ none | text | toggle | element | elements | all | inherit ] 12 | @mixin user-select($select) { 13 | $select: unquote($select); 14 | @include experimental(user-select, $select, 15 | -moz, -webkit, not(-o), -ms, -khtml, official 16 | ); 17 | } 18 | 19 | // Style the html5 input placeholder in browsers that support it. 20 | // 21 | // The styles for the input placeholder are passed as mixin content 22 | // and the selector comes from the mixin's context. 23 | // 24 | // For example: 25 | // 26 | // #{elements-of-type(text-input)} { 27 | // @include input-placeholder { 28 | // color: #bfbfbf; 29 | // font-style: italic; 30 | // } 31 | // } 32 | // 33 | // if you want to apply the placeholder styles to all elements supporting 34 | // the `input-placeholder` pseudo class (beware of performance impacts): 35 | // 36 | // * { 37 | // @include input-placeholder { 38 | // color: #bfbfbf; 39 | // font-style: italic; 40 | // } 41 | // } 42 | @mixin input-placeholder { 43 | &:-ms-input-placeholder { @content; } 44 | &:-moz-placeholder { @content; } 45 | &::-moz-placeholder { @content; } 46 | &::-webkit-input-placeholder { @content; } 47 | } 48 | -------------------------------------------------------------------------------- /lib/compass/functions/_colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // A partial implementation of the Ruby colors functions from Compass: 3 | // https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb 4 | // 5 | 6 | // a genericized version of lighten/darken so that negative values can be used. 7 | @function adjust-lightness($color, $amount) { 8 | @return adjust-color($color, $lightness: $amount); 9 | } 10 | 11 | // Scales a color's lightness by some percentage. 12 | // If the amount is negative, the color is scaled darker, if positive, it is scaled lighter. 13 | // This will never return a pure light or dark color unless the amount is 100%. 14 | @function scale-lightness($color, $amount) { 15 | @return scale-color($color, $lightness: $amount); 16 | } 17 | 18 | // a genericized version of saturate/desaturate so that negative values can be used. 19 | @function adjust-saturation($color, $amount) { 20 | @return adjust-color($color, $saturation: $amount); 21 | } 22 | 23 | // Scales a color's saturation by some percentage. 24 | // If the amount is negative, the color is desaturated, if positive, it is saturated. 25 | // This will never return a pure saturated or desaturated color unless the amount is 100%. 26 | @function scale-saturation($color, $amount) { 27 | @return scale-color($color, $saturation: $amount); 28 | } 29 | 30 | @function shade($color, $percentage) { 31 | @return mix(#000000, $color, $percentage); 32 | } 33 | 34 | @function tint($color, $percentage) { 35 | @return mix(#ffffff, $color, $percentage); 36 | } 37 | 38 | -------------------------------------------------------------------------------- /lib/compass/functions/_constants.scss: -------------------------------------------------------------------------------- 1 | // 2 | // A partial implementation of the Ruby constants functions from Compass: 3 | // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb 4 | // 5 | 6 | @function opposite-position($from) { 7 | @if ($from == top) { 8 | @return bottom; 9 | } @else if ($from == bottom) { 10 | @return top; 11 | } @else if ($from == left) { 12 | @return right; 13 | } @else if ($from == right) { 14 | @return left; 15 | } @else if ($from == center) { 16 | @return center; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /lib/compass/functions/_cross_browser_support.scss: -------------------------------------------------------------------------------- 1 | // 2 | // A partial implementation of the Ruby cross browser support functions from Compass: 3 | // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb 4 | // 5 | 6 | @function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 7 | $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9; 8 | $prefixed: false; 9 | @each $item in $properties { 10 | @if type-of($item) == 'string' { 11 | $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1; 12 | } @else if type-of($item) == 'color' { 13 | } @else if $item != null { 14 | $prefixed: true; 15 | } 16 | } 17 | @return $prefixed; 18 | } 19 | 20 | @function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 21 | $properties: ""; 22 | 23 | // Support for polymorphism. 24 | @if type-of($property1) == 'list' { 25 | // Passing a single array of properties. 26 | $properties: $property1; 27 | } @else { 28 | // Passing multiple properties. 29 | $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9; 30 | } 31 | 32 | $props: false; 33 | @each $item in $properties { 34 | @if $item == null {} 35 | @else { 36 | @if prefixed($prefix, $item) { 37 | $item: #{$prefix}-#{$item}; 38 | } 39 | @if $props { 40 | $props: $props, $item; 41 | } 42 | @else { 43 | $props: $item; 44 | } 45 | } 46 | } 47 | @return $props; 48 | } 49 | 50 | @function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 51 | @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9); 52 | } 53 | 54 | @function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 55 | @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9); 56 | } 57 | 58 | @function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 59 | @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9); 60 | } 61 | 62 | @function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 63 | @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9); 64 | } 65 | 66 | @function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 67 | @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9); 68 | } 69 | 70 | @function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) { 71 | @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9); 72 | } 73 | -------------------------------------------------------------------------------- /lib/compass/functions/_display.scss: -------------------------------------------------------------------------------- 1 | // 2 | // A partial implementation of the Ruby display functions from Compass: 3 | // https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb 4 | // 5 | 6 | @function elements-of-type($type){ 7 | @if ($type == block){ 8 | @return address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul; 9 | } @else if ($type == inline){ 10 | @return a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr; 11 | } @else if ($type == inline-block){ 12 | @return img; 13 | } @else if ($type == table){ 14 | @return table; 15 | } @else if ($type == list-item){ 16 | @return li; 17 | } @else if ($type == table-row-group){ 18 | @return tbody; 19 | } @else if ($type == table-header-group){ 20 | @return thead; 21 | } @else if ($type == table-footer-group){ 22 | @return tfoot; 23 | } @else if ($type == table-row){ 24 | @return tr; 25 | } @else if ($type == table-cell){ 26 | @return th, td; 27 | } @else if ($type == html5-block){ 28 | @return article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary; 29 | } @else if ($type == html5-inline){ 30 | @return audio, canvas, command, datalist, embed, keygen, mark, meter, output, progress, rp, rt, ruby, time, video, wbr; 31 | } @else if ($type == html5){ 32 | @return article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr; 33 | } @else if ($type == text-input){ 34 | @return input, textarea; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /lib/compass/functions/_font_files.scss: -------------------------------------------------------------------------------- 1 | // 2 | // A partial implementation of the Ruby fonts functions from Compass: 3 | // https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb 4 | // 5 | // and several functions from the file: 6 | // https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb 7 | // ----------------------------------------------------------------------------- 8 | // Helper functions font-files and font-url for font-face mixins. 9 | // ----------------------------------------------------------------------------- 10 | // use mixin this way: 11 | // 12 | // $font-path: "/public/fonts/roboto"; 13 | // @include font-face( 14 | // 'Roboto', 15 | // font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"), // or 16 | // font_files("roboto.ttf", "roboto.woff", "roboto.woff2"), 17 | // "roboto.eot", // [$eot] 18 | // normal, // [$weight] 19 | // normal // [$style] 20 | // ); 21 | // ----------------------------------------------------------------------------- 22 | 23 | 24 | @function font-url($path) { 25 | $font-path: 'fonts' !default; 26 | @return url("#{$font-path}/#{$path}"); 27 | } 28 | 29 | 30 | // ----------------------------------------------------------------------------- 31 | // helper function to create a list of font files for the src attribute in @font-face. 32 | // In the global variable $font-path, you can specify the path to the folder 33 | // with fonts relative to style files, by default the path to the fonts is "fonts". 34 | // 35 | // Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...). 36 | // If the font format is not specified, the function will add the format corresponding to the file extension. 37 | // 38 | // for best results use this order: woff, opentype / truetype, svg. 39 | // ----------------------------------------------------------------------------- 40 | // function ported from Ruby. 41 | // ----------------------------------------------------------------------------- 42 | @function font-files($font-files...) { 43 | $font-path: 'fonts' !default; 44 | // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles. 45 | $font-types: ( 46 | 'woff': "woff", 47 | 'woff2': "woff2", 48 | 'opentype': "otf", 49 | // 'opentype': "opentype", 50 | 'truetype': "ttf", 51 | // 'truetype': "truetype", 52 | 'svg': "svg", 53 | 'embedded-opentype': "eot" 54 | ); 55 | 56 | $full: ''; 57 | // if the font format is specified after the font file name, skip the next iteration. 58 | $skip-next: false; 59 | // number of font files including font format. 60 | $font-file-length: length($font-files); 61 | 62 | @for $i from 1 through $font-file-length { 63 | @if(not $skip-next) { 64 | $font-file: nth($font-files, $i); 65 | $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false); 66 | 67 | // add font url. 68 | $full: $full + 'url("#{$font-path}/#{$font-file}")'; 69 | 70 | // add the font format if it is specified after the font file name. 71 | @if $font-file-next and map-has-key($font-types, $font-file-next) { 72 | $full: $full + ' format("#{$font-file-next}")'; 73 | $skip-next: true; 74 | } @else { 75 | // add a font format based on the font file name extension. 76 | @each $type, $extension in $font-types { 77 | $pos: str-index($font-file, '.' + $extension); 78 | 79 | @if($font-file-next == $extension) { 80 | $full: $full + ' format("#{$type}")'; 81 | $skip-next: true; 82 | } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) { 83 | $full: $full + ' format("#{$type}")'; 84 | } 85 | } 86 | } 87 | } @else { 88 | $skip-next: false; 89 | } 90 | 91 | @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';} 92 | } 93 | 94 | @return unquote($full); 95 | } 96 | -------------------------------------------------------------------------------- /lib/compass/functions/_gradient_support.scss: -------------------------------------------------------------------------------- 1 | // 2 | // A partial implementation of the Ruby gradient support functions from Compass: 3 | // https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb 4 | // 5 | 6 | @function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) { 7 | $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9; 8 | $full: $item1; 9 | @each $item in $items { 10 | @if $item != null { 11 | $full: $full, $item; 12 | } 13 | } 14 | @return $full; 15 | } -------------------------------------------------------------------------------- /lib/compass/functions/_lists.scss: -------------------------------------------------------------------------------- 1 | // 2 | // A partial implementation of the Ruby list functions from Compass: 3 | // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb 4 | // 5 | 6 | 7 | // compact is part of libsass 8 | 9 | @function -compass-nth($list, $place) { 10 | // Yep, Sass-lists are 1-indexed. 11 | @if $place == "first" { 12 | $place: 1; 13 | } 14 | @if $place == "last" { 15 | $place: length($list); 16 | } 17 | @return nth($list, $place); 18 | } 19 | 20 | // compass_list can't be implemented in sass script 21 | 22 | @function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) { 23 | $items: (); 24 | // Support for polymorphism. 25 | @if type-of($item1) == 'list' { 26 | // Passing a single array of properties. 27 | $items: $item1; 28 | } @else { 29 | $items: $item1 $item2 $item3 $item4 $item5 $item6 $item7 $item8 $item9; 30 | } 31 | 32 | $full: first-value-of($items); 33 | 34 | @for $i from 2 through length($items) { 35 | $item: nth($items, $i); 36 | @if $item != null { 37 | $full: $full $item; 38 | } 39 | } 40 | 41 | @return $full; 42 | } 43 | 44 | @function -compass-list-size($list) { 45 | @return length($list); 46 | } 47 | 48 | @function -compass-slice($list, $start, $end: false) { 49 | @if $end == false { 50 | $end: length($list); 51 | } 52 | $full: nth($list, $start); 53 | @for $i from $start + 1 through $end { 54 | $full: $full, nth($list, $i); 55 | } 56 | @return $full; 57 | } 58 | 59 | @function reject($list, $reject1, $reject2:null, $reject3:null, $reject4:null, $reject5:null, $reject6:null, $reject7:null, $reject8:null, $reject9:null) { 60 | $rejects: $reject1, $reject2, $reject3, $reject4, $reject5, $reject6, $reject7, $reject8, $reject9; 61 | 62 | $full: false; 63 | @each $item in $list { 64 | @if index($rejects, $item) {} 65 | @else { 66 | @if $full { 67 | $full: $full, $item; 68 | } 69 | @else { 70 | $full: $item; 71 | } 72 | } 73 | } 74 | @return $full; 75 | } 76 | 77 | @function first-value-of($list) { 78 | @return nth($list, 1); 79 | } 80 | 81 | @function compact($vars...) { 82 | $separator: list-separator($vars); 83 | $list: (); 84 | @each $var in $vars { 85 | @if $var { 86 | $list: append($list, $var, $separator); 87 | } 88 | } 89 | @return $list; 90 | } 91 | -------------------------------------------------------------------------------- /lib/compass/layout/_grid-background.scss: -------------------------------------------------------------------------------- 1 | @import "../css3/images"; 2 | @import "../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 | // toggle your columns grids on and off 24 | $show-column-grid-backgrounds : true !default; 25 | // toggle your vertical grids on and off 26 | $show-baseline-grid-backgrounds : true !default; 27 | // toggle all your grids on and off 28 | $show-grid-backgrounds : true !default; 29 | 30 | // optionally force your grid-image to remain fluid 31 | // no matter what units you used to declared your grid. 32 | $grid-background-force-fluid : false !default; 33 | 34 | 35 | // Create the gradient needed for baseline grids 36 | @function get-baseline-gradient( 37 | $color : $grid-background-baseline-color 38 | ) { 39 | $gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%); 40 | @return $gradient; 41 | } 42 | 43 | // Create the color-stops needed for horizontal grids 44 | @function build-grid-background( 45 | $total : $grid-background-total-columns, 46 | $column : $grid-background-column-width, 47 | $gutter : $grid-background-gutter-width, 48 | $offset : $grid-background-offset, 49 | $column-color : $grid-background-column-color, 50 | $gutter-color : $grid-background-gutter-color 51 | ) { 52 | $grid: compact(); 53 | $grid: append($grid, $gutter-color $offset, comma); 54 | @for $i from 0 to $total { 55 | 56 | // $a represents the start of this column, initially equal to the offset 57 | $a: $offset; 58 | @if $i > 0 { $a: $a + (($column + $gutter) * $i); } 59 | 60 | // $g represents the start of this gutter, equal to $a plus one column-width 61 | $g: $a + $column; 62 | 63 | // $z represents the end of a gutter, equal to $g plus one gutter-width 64 | $z: $g + $gutter; 65 | 66 | @if (unit($a) == "%") and ($i == ($total - 1)) { 67 | $z: 100%; 68 | } 69 | 70 | // and we add this column/gutter pair to our grid 71 | $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z)); 72 | } 73 | 74 | @return $grid; 75 | } 76 | 77 | // Return the gradient needed for horizontal grids 78 | @function get-column-gradient( 79 | $total : $grid-background-total-columns, 80 | $column : $grid-background-column-width, 81 | $gutter : $grid-background-gutter-width, 82 | $offset : $grid-background-offset, 83 | $column-color : $grid-background-column-color, 84 | $gutter-color : $grid-background-gutter-color, 85 | $force-fluid : $grid-background-force-fluid 86 | ) { 87 | $grid: unquote(""); 88 | 89 | // don't force fluid grids when they are already fluid. 90 | @if unit($column) == "%" { $force-fluid: false; } 91 | 92 | @if $force-fluid { 93 | $grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color); 94 | } @else { 95 | $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color); 96 | } 97 | 98 | // return the horizontal grid as a gradient 99 | $gradient: linear-gradient(left, $grid); 100 | @return $gradient; 101 | } 102 | 103 | // Convert a grid from fixed units into percentages. 104 | @function get-column-fluid-grid( 105 | $total : $grid-background-total-columns, 106 | $column : $grid-background-column-width, 107 | $gutter : $grid-background-gutter-width, 108 | $offset : $grid-background-offset, 109 | $column-color : $grid-background-column-color, 110 | $gutter-color : $grid-background-gutter-color 111 | ) { 112 | $context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2)); 113 | $offset: $offset / $context * 100%; 114 | $column: $column / $context * 100%; 115 | $gutter: $gutter / $context * 100%; 116 | 117 | // return the horizontal grid as a set of color-stops 118 | $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color); 119 | @return $grid; 120 | } 121 | 122 | 123 | // Add just the baseline grid to an element's background 124 | @mixin baseline-grid-background( 125 | $baseline : $grid-background-baseline-height, 126 | $color : $grid-background-baseline-color 127 | ) { 128 | @if $show-grid-backgrounds and $show-baseline-grid-backgrounds { 129 | @include background-image(get-baseline-gradient($color)); 130 | @include background-size(100% $baseline); 131 | background-position: left top; 132 | } 133 | } 134 | 135 | // Add just the horizontal grid to an element's background 136 | @mixin column-grid-background( 137 | $total : $grid-background-total-columns, 138 | $column : $grid-background-column-width, 139 | $gutter : $grid-background-gutter-width, 140 | $offset : $grid-background-offset, 141 | $column-color : $grid-background-column-color, 142 | $gutter-color : $grid-background-gutter-color, 143 | $force-fluid : $grid-background-force-fluid 144 | ) { 145 | @if $show-grid-backgrounds and $show-column-grid-backgrounds { 146 | @include background-image( 147 | get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid) 148 | ); 149 | background-position: left top; 150 | } 151 | } 152 | 153 | // Add both horizontal and baseline grids to an element's background 154 | @mixin grid-background( 155 | $total : $grid-background-total-columns, 156 | $column : $grid-background-column-width, 157 | $gutter : $grid-background-gutter-width, 158 | $baseline : $grid-background-baseline-height, 159 | $offset : $grid-background-offset, 160 | $column-color : $grid-background-column-color, 161 | $gutter-color : $grid-background-gutter-color, 162 | $baseline-color : $grid-background-baseline-color, 163 | $force-fluid : $grid-background-force-fluid 164 | ) { 165 | @if $show-grid-backgrounds { 166 | @if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds { 167 | @include background-image( 168 | get-baseline-gradient($baseline-color), 169 | get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid) 170 | ); 171 | @include background-size(100% $baseline, auto); 172 | background-position: left top; 173 | } @else { 174 | @include baseline-grid-background($baseline, $baseline-color); 175 | @include column-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid); 176 | } 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /lib/compass/layout/_sticky-footer.scss: -------------------------------------------------------------------------------- 1 | // Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/). 2 | // 3 | // Must be mixed into the top level of your stylesheet. 4 | // 5 | // Footer element must be outside of root wrapper element. 6 | // 7 | // Footer must be a fixed height. 8 | 9 | @mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) { 10 | html, body { 11 | height: 100%; } 12 | #{$root-selector} { 13 | clear: both; 14 | min-height: 100%; 15 | height: auto !important; 16 | height: 100%; 17 | margin-bottom: -$footer-height; 18 | #{$root-footer-selector} { 19 | height: $footer-height; } } 20 | #{$footer-selector} { 21 | clear: both; 22 | position: relative; 23 | height: $footer-height; } } 24 | -------------------------------------------------------------------------------- /lib/compass/layout/_stretching.scss: -------------------------------------------------------------------------------- 1 | 2 | // stretch element height to specified top and bottom position 3 | 4 | @mixin stretch-y($offset-top:0, $offset-bottom:0) { 5 | @include stretch($offset-top, false, $offset-bottom, false); 6 | } 7 | 8 | 9 | // stretch element width to specified left and right position 10 | 11 | @mixin stretch-x($offset-left:0, $offset-right:0) { 12 | @include stretch(false, $offset-right, false, $offset-left); 13 | } 14 | 15 | 16 | // shorthand to stretch element height and width 17 | 18 | @mixin stretch($offset-top:0, $offset-right:0, $offset-bottom:0, $offset-left:0) { 19 | position: absolute; 20 | @if $offset-top { top: $offset-top; } 21 | @if $offset-bottom { bottom: $offset-bottom; } 22 | @if $offset-left { left: $offset-left; } 23 | @if $offset-right { right: $offset-right; } 24 | } -------------------------------------------------------------------------------- /lib/compass/reset/_utilities-legacy.scss: -------------------------------------------------------------------------------- 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; } } } 136 | -------------------------------------------------------------------------------- /lib/compass/reset/_utilities.scss: -------------------------------------------------------------------------------- 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; } } } 143 | -------------------------------------------------------------------------------- /lib/compass/typography/_links.scss: -------------------------------------------------------------------------------- 1 | @import "links/hover-link"; 2 | @import "links/link-colors"; 3 | @import "links/unstyled-link"; 4 | -------------------------------------------------------------------------------- /lib/compass/typography/_lists.scss: -------------------------------------------------------------------------------- 1 | @import "lists/horizontal-list"; 2 | @import "lists/inline-list"; 3 | @import "lists/inline-block-list"; 4 | @import "lists/bullets"; 5 | -------------------------------------------------------------------------------- /lib/compass/typography/_text.scss: -------------------------------------------------------------------------------- 1 | @import "text/ellipsis"; 2 | @import "text/nowrap"; 3 | @import "text/replacement"; 4 | @import "text/force-wrap"; 5 | -------------------------------------------------------------------------------- /lib/compass/typography/_vertical_rhythm.scss: -------------------------------------------------------------------------------- 1 | @import "../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: calc($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: calc(($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: calc($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% * calc($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: calc($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: calc($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}-style: $border-style; 184 | border-#{$side}-width: calc($font-unit * $width / $font-size); 185 | padding-#{$side}: rhythm($lines, $font-size, $offset: $width); 186 | } 187 | 188 | // Apply borders and whitespace equally to all sides. 189 | @mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { 190 | @if not($relative-font-sizing) and $font-size != $base-font-size { 191 | @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders"; 192 | } 193 | border: { 194 | style: $border-style; 195 | width: calc($font-unit * $width / $font-size); 196 | }; 197 | padding: rhythm($lines, $font-size, $offset: $width); 198 | } 199 | 200 | // Apply a leading border. 201 | @mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { 202 | @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); 203 | } 204 | 205 | // Apply a trailing border. 206 | @mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { 207 | @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); 208 | } 209 | 210 | // Apply both leading and trailing borders. 211 | @mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { 212 | @include leading-border($width, $lines, $font-size, $border-style); 213 | @include trailing-border($width, $lines, $font-size, $border-style); 214 | } 215 | 216 | // Alias for `horizontal-borders` mixin. 217 | @mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { 218 | @include horizontal-borders($width, $lines, $font-size, $border-style); 219 | } 220 | 221 | // Shorthand mixin to apply whitespace for top and bottom margins. 222 | @mixin rhythm-margins( 223 | $leader: 1, 224 | $trailer: $leader, 225 | $font-size: $base-font-size 226 | ) { 227 | @include leader($leader, $font-size); 228 | @include trailer($trailer, $font-size); 229 | } 230 | -------------------------------------------------------------------------------- /lib/compass/typography/links/_hover-link.scss: -------------------------------------------------------------------------------- 1 | // a link that only has an underline when you hover over it 2 | @mixin hover-link { 3 | text-decoration: none; 4 | &:hover { 5 | text-decoration: underline; } } 6 | -------------------------------------------------------------------------------- /lib/compass/typography/links/_link-colors.scss: -------------------------------------------------------------------------------- 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; } } } 29 | -------------------------------------------------------------------------------- /lib/compass/typography/links/_unstyled-link.scss: -------------------------------------------------------------------------------- 1 | // A link that looks and acts like the text it is contained within 2 | @mixin unstyled-link { 3 | color: inherit; 4 | text-decoration: inherit; 5 | cursor: inherit; 6 | &:active, &:focus { 7 | outline: none; } } 8 | -------------------------------------------------------------------------------- /lib/compass/typography/lists/_bullets.scss: -------------------------------------------------------------------------------- 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 | } 35 | -------------------------------------------------------------------------------- /lib/compass/typography/lists/_horizontal-list.scss: -------------------------------------------------------------------------------- 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 "../../utilities/general/clearfix"; 20 | @import "../../utilities/general/reset"; 21 | @import "../../utilities/general/float"; 22 | 23 | // Can be mixed into any selector that target a ul or ol that is meant 24 | // to have a horizontal layout. Used to implement +horizontal-list. 25 | @mixin horizontal-list-container { 26 | @include reset-box-model; 27 | @include clearfix; } 28 | 29 | // Can be mixed into any li selector that is meant to participate in a horizontal layout. 30 | // Used to implement +horizontal-list. 31 | // 32 | // :last-child is not fully supported 33 | // see http://www.quirksmode.org/css/contents.html#t29 for the support matrix 34 | // 35 | // IE8 ignores rules that are included on the same line as :last-child 36 | // see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details 37 | // 38 | // Setting `$padding` to `false` disables the padding between list elements 39 | @mixin horizontal-list-item($padding: 4px, $direction: left) { 40 | @include no-bullet; 41 | white-space: nowrap; 42 | @include float($direction); 43 | @if $padding { 44 | padding: { 45 | left: $padding; 46 | right: $padding; 47 | } 48 | &:first-child, &.first { padding-#{$direction}: 0; } 49 | &:last-child { padding-#{opposite-position($direction)}: 0; } 50 | &.last { padding-#{opposite-position($direction)}: 0; } 51 | } 52 | } 53 | 54 | // A list(ol,ul) that is layed out such that the elements are floated left and won't wrap. 55 | // This is not an inline list. 56 | // 57 | // Setting `$padding` to `false` disables the padding between list elements 58 | @mixin horizontal-list($padding: 4px, $direction: left) { 59 | @include horizontal-list-container; 60 | li { 61 | @include horizontal-list-item($padding, $direction); } } 62 | -------------------------------------------------------------------------------- /lib/compass/typography/lists/_inline-block-list.scss: -------------------------------------------------------------------------------- 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 "../../utilities/general/float"; 25 | @import "../../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); } } 51 | -------------------------------------------------------------------------------- /lib/compass/typography/lists/_inline-list.scss: -------------------------------------------------------------------------------- 1 | // makes a list inline. 2 | 3 | @mixin inline-list { 4 | list-style-type: none; 5 | &, & li { 6 | margin: 0px; 7 | padding: 0px; 8 | display: inline; 9 | } 10 | } 11 | 12 | // makes an inline list delimited with the passed string. 13 | // Defaults to making a comma-separated list. 14 | // 15 | // Please make note of the browser support issues before using this mixin: 16 | // 17 | // use of `content` and `:after` is not fully supported in all browsers. 18 | // See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15) 19 | // 20 | // `:last-child` is not fully supported. 21 | // see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29). 22 | // 23 | // IE8 ignores rules that are included on the same line as :last-child 24 | // see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details 25 | 26 | @mixin delimited-list($separator: ", ") { 27 | @include inline-list; 28 | li { 29 | &:after { content: $separator; } 30 | &:last-child { 31 | &:after { content: ""; } 32 | } 33 | &.last { 34 | &:after { content: ""; } 35 | } 36 | } 37 | } 38 | 39 | // See [delimited-list](#mixin-delimited-list) 40 | // @deprecated 41 | @mixin comma-delimited-list { 42 | @warn "comma-delimited-list is deprecated. Please use delimited-list instead."; 43 | @include delimited-list; 44 | } 45 | -------------------------------------------------------------------------------- /lib/compass/typography/text/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @import "../../css3/shared"; 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 $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding { 23 | -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis")); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /lib/compass/typography/text/_force-wrap.scss: -------------------------------------------------------------------------------- 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 | } 13 | -------------------------------------------------------------------------------- /lib/compass/typography/text/_nowrap.scss: -------------------------------------------------------------------------------- 1 | // When remembering whether or not there's a hyphen in white-space is too hard 2 | @mixin nowrap { white-space: nowrap; } 3 | -------------------------------------------------------------------------------- /lib/compass/typography/text/_replacement.scss: -------------------------------------------------------------------------------- 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: url($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; 49 | $wider-than-any-screen: -9999; 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 | } 69 | -------------------------------------------------------------------------------- /lib/compass/utilities/_color.scss: -------------------------------------------------------------------------------- 1 | @import "color/contrast"; -------------------------------------------------------------------------------- /lib/compass/utilities/_general.scss: -------------------------------------------------------------------------------- 1 | @import "general/reset"; 2 | @import "general/clearfix"; 3 | @import "general/float"; 4 | @import "general/tag-cloud"; 5 | @import "general/hacks"; 6 | @import "general/min"; 7 | -------------------------------------------------------------------------------- /lib/compass/utilities/_links.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/links' instead."; 2 | 3 | @import "../typography/links/hover-link"; 4 | @import "../typography/links/link-colors"; 5 | @import "../typography/links/unstyled-link"; 6 | -------------------------------------------------------------------------------- /lib/compass/utilities/_lists.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/lists' instead."; 2 | 3 | @import "../typography/lists/horizontal-list"; 4 | @import "../typography/lists/inline-list"; 5 | @import "../typography/lists/inline-block-list"; 6 | @import "../typography/lists/bullets"; 7 | -------------------------------------------------------------------------------- /lib/compass/utilities/_print.scss: -------------------------------------------------------------------------------- 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 | } 18 | -------------------------------------------------------------------------------- /lib/compass/utilities/_sprites.scss: -------------------------------------------------------------------------------- 1 | @import "sprites/base"; 2 | @import "sprites/sprite-img"; 3 | -------------------------------------------------------------------------------- /lib/compass/utilities/_tables.scss: -------------------------------------------------------------------------------- 1 | @import "tables/alternating-rows-and-columns"; 2 | @import "tables/borders"; 3 | @import "tables/scaffolding"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/text' instead."; 2 | 3 | @import "../typography/text/ellipsis"; 4 | @import "../typography/text/nowrap"; 5 | @import "../typography/text/replacement"; 6 | -------------------------------------------------------------------------------- /lib/compass/utilities/color/_contrast.scss: -------------------------------------------------------------------------------- 1 | $contrasted-dark-default: #000 !default; 2 | $contrasted-light-default: #fff !default; 3 | $contrasted-lightness-threshold: 30% !default; 4 | 5 | // Returns the `$light` color when the `$color` is dark 6 | // and the `$dark` color when the `$color` is light. 7 | // The `$threshold` is a percent between `0%` and `100%` and it determines 8 | // when the lightness of `$color` changes from "dark" to "light". 9 | @function contrast-color( 10 | $color, 11 | $dark: $contrasted-dark-default, 12 | $light: $contrasted-light-default, 13 | $threshold: $contrasted-lightness-threshold 14 | ) { 15 | @return if(lightness($color) < $threshold, $light, $dark) 16 | } 17 | 18 | // Sets the specified background color and calculates a dark or light contrasted text color. 19 | // The arguments are passed through to the [contrast-color function](#function-contrast-color). 20 | @mixin contrasted( 21 | $background-color, 22 | $dark: $contrasted-dark-default, 23 | $light: $contrasted-light-default, 24 | $threshold: $contrasted-lightness-threshold 25 | ) { 26 | background-color: $background-color; 27 | color: contrast-color($background-color, $dark, $light, $threshold); 28 | } -------------------------------------------------------------------------------- /lib/compass/utilities/general/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // @doc off 2 | // Extends the bottom of the element to enclose any floats it contains. 3 | // @doc on 4 | 5 | @import "hacks"; 6 | 7 | // This basic method is preferred for the usual case, when positioned 8 | // content will not show outside the bounds of the container. 9 | // 10 | // Recommendations include using this in conjunction with a width. 11 | // Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html) 12 | @mixin clearfix { 13 | overflow: hidden; 14 | @include has-layout; 15 | } 16 | 17 | // This older method from Position Is Everything called 18 | // [Easy Clearing](http://www.positioniseverything.net/easyclearing.html) 19 | // has the advantage of allowing positioned elements to hang 20 | // outside the bounds of the container at the expense of more tricky CSS. 21 | @mixin legacy-pie-clearfix { 22 | &:after { 23 | content : "\0020"; 24 | display : block; 25 | height : 0; 26 | clear : both; 27 | overflow : hidden; 28 | visibility : hidden; 29 | } 30 | @include has-layout; 31 | } 32 | 33 | // This is an updated version of the PIE clearfix method that reduces the amount of CSS output. 34 | // If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead. 35 | // 36 | // Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) 37 | @mixin pie-clearfix { 38 | &:after { 39 | content: ""; 40 | display: table; 41 | clear: both; 42 | } 43 | @include has-layout; 44 | } 45 | -------------------------------------------------------------------------------- /lib/compass/utilities/general/_float.scss: -------------------------------------------------------------------------------- 1 | // Implementation of float:left with fix for the 2 | // [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html) 3 | @mixin float-left { 4 | @include float(left); } 5 | 6 | // Implementation of float:right with fix for the 7 | // [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html) 8 | @mixin float-right { 9 | @include float(right); } 10 | 11 | // Direction independent float mixin that fixes the 12 | // [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html) 13 | @mixin float($side: left) { 14 | display: inline; 15 | float: unquote($side); } 16 | 17 | // Resets floated elements back to their default of `float: none` and defaults 18 | // to `display: block` unless you pass `inline` as an argument 19 | // 20 | // Usage Example: 21 | // 22 | // body.homepage 23 | // #footer li 24 | // +float-left 25 | // body.signup 26 | // #footer li 27 | // +reset-float 28 | @mixin reset-float($display: block) { 29 | float: none; 30 | display: $display; } -------------------------------------------------------------------------------- /lib/compass/utilities/general/_hacks.scss: -------------------------------------------------------------------------------- 1 | @import "../../support"; 2 | 3 | // The `zoom` approach generates less CSS but does not validate. 4 | // Set this to `block` to use the display-property to hack the 5 | // element to gain layout. 6 | $default-has-layout-approach: zoom !default; 7 | 8 | // This mixin causes an element matching the selector 9 | // to gain the "hasLayout" property in internet explorer. 10 | // More information on [hasLayout](http://reference.sitepoint.com/css/haslayout). 11 | @mixin has-layout($approach: $default-has-layout-approach) { 12 | @if $legacy-support-for-ie { 13 | @if $approach == zoom { 14 | @include has-layout-zoom; 15 | } @else if $approach == block { 16 | @include has-layout-block; 17 | } @else { 18 | @warn "Unknown has-layout approach: #{$approach}"; 19 | @include has-layout-zoom; 20 | } 21 | } 22 | } 23 | 24 | @mixin has-layout-zoom { 25 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 26 | *zoom: 1; 27 | } 28 | } 29 | 30 | @mixin has-layout-block { 31 | @if $legacy-support-for-ie { 32 | // This makes ie6 get layout 33 | display: inline-block; 34 | // and this puts it back to block 35 | & { display: block; } 36 | } 37 | } 38 | 39 | // A hack to supply IE6 (and below) with a different property value. 40 | // [Read more](http://www.cssportal.com/css-hacks/#in_css-important). 41 | @mixin bang-hack($property, $value, $ie6-value) { 42 | @if $legacy-support-for-ie6 { 43 | #{$property}: #{$value} !important; 44 | #{$property}: #{$ie6-value}; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /lib/compass/utilities/general/_min.scss: -------------------------------------------------------------------------------- 1 | @import "hacks"; 2 | 3 | //** 4 | // Cross browser min-height mixin. 5 | @mixin min-height($value) { 6 | @include hacked-minimum(height, $value); } 7 | 8 | //** 9 | // Cross browser min-width mixin. 10 | @mixin min-width($value) { 11 | @include hacked-minimum(width, $value); } 12 | 13 | // @private This mixin is not meant to be used directly. 14 | @mixin hacked-minimum($property, $value) { 15 | min-#{$property}: $value; 16 | @include bang-hack($property, auto, $value); } 17 | -------------------------------------------------------------------------------- /lib/compass/utilities/general/_reset.scss: -------------------------------------------------------------------------------- 1 | // This module has moved. 2 | @import "../../reset/utilities"; 3 | -------------------------------------------------------------------------------- /lib/compass/utilities/general/_tabs.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lib/compass/utilities/general/_tag-cloud.scss: -------------------------------------------------------------------------------- 1 | // Emits styles for a tag cloud 2 | @mixin tag-cloud($base-size: 1em) { 3 | font-size: $base-size; 4 | line-height: 1.2 * $base-size; 5 | .xxs, .xs, .s, .l, .xl, .xxl { 6 | line-height: 1.2 * $base-size; } 7 | .xxs { 8 | font-size: $base-size / 2; } 9 | .xs { 10 | font-size: 2 * $base-size / 3; } 11 | .s { 12 | font-size: 3 * $base-size / 4; } 13 | .l { 14 | font-size: 4 * $base-size / 3; } 15 | .xl { 16 | font-size: 3 * $base-size / 2; } 17 | .xxl { 18 | font-size: 2 * $base-size; } } 19 | -------------------------------------------------------------------------------- /lib/compass/utilities/links/_hover-link.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/links/hover-link' instead."; 2 | 3 | @import "../../typography/links/hover-link"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/links/_link-colors.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/links/link-colors' instead."; 2 | 3 | @import "../../typography/links/link-colors"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/links/_unstyled-link.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/links/unstyled-link' instead."; 2 | 3 | @import "../../typography/links/unstyled-link"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/lists/_bullets.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/lists/bullets' instead."; 2 | 3 | @import "../../typography/lists/bullets"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/lists/_horizontal-list.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/lists/horizontal-list' instead."; 2 | 3 | @import "../../typography/lists/horizontal-list"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/lists/_inline-block-list.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/lists/inline-block-list' instead."; 2 | 3 | @import "../../typography/lists/inline-block-list"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/lists/_inline-list.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/lists/inline-list' instead."; 2 | 3 | @import "../../typography/lists/inline-list"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/sprites/_base.scss: -------------------------------------------------------------------------------- 1 | // Determines those states for which you want to enable magic sprite selectors 2 | $sprite-selectors: hover, target, active !default; 3 | 4 | // Set the width and height of an element to the original 5 | // dimensions of an image before it was included in the sprite. 6 | @mixin sprite-dimensions($map, $sprite) { 7 | height: image-height(sprite-file($map, $sprite)); 8 | width: image-width(sprite-file($map, $sprite)); 9 | } 10 | 11 | // Set the background position of the given sprite `$map` to display the 12 | // sprite of the given `$sprite` name. You can move the image relative to its 13 | // natural position by passing `$offset-x` and `$offset-y`. 14 | @mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0) { 15 | background-position: sprite-position($map, $sprite, $offset-x, $offset-y); 16 | } 17 | 18 | 19 | // Determines if you want to include magic selectors in your sprites 20 | $disable-magic-sprite-selectors:false !default; 21 | 22 | // Include the position and (optionally) dimensions of this `$sprite` 23 | // in the given sprite `$map`. The sprite url should come from either a base 24 | // class or you can specify the `sprite-url` explicitly like this: 25 | // 26 | // background: $map no-repeat; 27 | @mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) { 28 | @include sprite-background-position($map, $sprite, $offset-x, $offset-y); 29 | @if $dimensions { 30 | @include sprite-dimensions($map, $sprite); 31 | } 32 | @if not($disable-magic-sprite-selectors) { 33 | @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y); 34 | } 35 | } 36 | 37 | // Include the selectors for the `$sprite` given the `$map` and the 38 | // `$full-sprite-name` 39 | // @private 40 | @mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) { 41 | @each $selector in $sprite-selectors { 42 | @if sprite_has_selector($map, $sprite-name, $selector) { 43 | &:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} { 44 | @include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y); 45 | } 46 | } 47 | } 48 | } 49 | 50 | // Generates a class for each space separated name in `$sprite-names`. 51 | // The class will be of the form .-. 52 | // 53 | // If a base class is provided, then each class will extend it. 54 | // 55 | // If `$dimensions` is `true`, the sprite dimensions will specified. 56 | @mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) { 57 | @each $sprite-name in $sprite-names { 58 | @if sprite_does_not_have_parent($map, $sprite-name) { 59 | $full-sprite-name: "#{$prefix}-#{$sprite-name}"; 60 | .#{$full-sprite-name} { 61 | @if $base-class { @extend #{$base-class}; } 62 | @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y); 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /lib/compass/utilities/sprites/_sprite-img.scss: -------------------------------------------------------------------------------- 1 | // @doc off 2 | // Example 1: 3 | // 4 | // a.twitter 5 | // +sprite-img("icons-32.png", 1) 6 | // a.facebook 7 | // +sprite-img("icons-32png", 2) 8 | // 9 | // Example 2: 10 | // 11 | // a 12 | // +sprite-background("icons-32.png") 13 | // a.twitter 14 | // +sprite-column(1) 15 | // a.facebook 16 | // +sprite-row(2) 17 | // @doc on 18 | 19 | $sprite-default-size: 32px !default; 20 | 21 | $sprite-default-margin: 0px !default; 22 | 23 | $sprite-image-default-width: $sprite-default-size !default; 24 | 25 | $sprite-image-default-height: $sprite-default-size !default; 26 | 27 | // Sets all the rules for a sprite from a given sprite image to show just one of the sprites. 28 | // To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning. 29 | @mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { 30 | @include sprite-background($img, $width, $height); 31 | @include sprite-position($col, $row, $width, $height, $margin); 32 | } 33 | 34 | // Sets rules common for all sprites, assumes you want a square, but allows a rectangular region. 35 | @mixin sprite-background($img, $width: $sprite-default-size, $height: $width) { 36 | @include sprite-background-rectangle($img, $width, $height); 37 | } 38 | 39 | // Sets rules common for all sprites, assumes a rectangular region. 40 | @mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) { 41 | background: image-url($img) no-repeat; 42 | width: $width; 43 | height: $height; 44 | overflow: hidden; 45 | } 46 | 47 | // Allows horizontal sprite positioning optimized for a single row of sprites. 48 | @mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) { 49 | @include sprite-position($col, 1, $width, 0px, $margin); 50 | } 51 | 52 | // Allows vertical sprite positioning optimized for a single column of sprites. 53 | @mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { 54 | @include sprite-position(1, $row, 0px, $height, $margin); 55 | } 56 | 57 | // Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites. 58 | @mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { 59 | $x: ($col - 1) * -$width - ($col - 1) * $margin; 60 | $y: ($row - 1) * -$height - ($row - 1) * $margin; 61 | background-position: $x $y; 62 | } 63 | 64 | 65 | 66 | // Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions 67 | @mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) { 68 | @include hide-text; 69 | @include sprite($map, $sprite, $dimensions, $offset-x, $offset-y); 70 | background-image: $map; 71 | background-repeat: no-repeat; 72 | } 73 | 74 | // Similar to 'replace-text-with-dimensions' but with sprites 75 | // To use, create your sprite and then pass it in the `$map` param 76 | // The name of the image in the sprite folder should be `$img-name` 77 | @mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){ 78 | @include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y); 79 | } -------------------------------------------------------------------------------- /lib/compass/utilities/tables/_alternating-rows-and-columns.scss: -------------------------------------------------------------------------------- 1 | @mixin alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white) { 2 | th { 3 | background-color: $header-color; 4 | &.even, &:nth-child(2n) { 5 | background-color: $header-color - $dark-intersection; } } 6 | tr { 7 | &.odd, &:nth-child(2n+1) { 8 | td { 9 | background-color: $odd-row-color; 10 | &.even, &:nth-child(2n) { 11 | background-color: $odd-row-color - $dark-intersection; } } } 12 | } 13 | tr.even { 14 | td { 15 | background-color: $even-row-color; 16 | &.even, &:nth-child(2n) { 17 | background-color: $even-row-color - $dark-intersection; } } } 18 | tfoot { 19 | th, td { 20 | background-color: $footer-color; 21 | &.even, &:nth-child(2n) { 22 | background-color: $footer-color - $dark-intersection; } } } } 23 | -------------------------------------------------------------------------------- /lib/compass/utilities/tables/_borders.scss: -------------------------------------------------------------------------------- 1 | @mixin outer-table-borders($width: 2px, $color: black) { 2 | border: $width solid $color; 3 | thead { 4 | th { 5 | border-bottom: $width solid $color; } } 6 | tfoot { 7 | th, td { 8 | border-top: $width solid $color; } } 9 | th { 10 | &:first-child { 11 | border-right: $width solid $color; } } } 12 | 13 | @mixin inner-table-borders($width: 2px, $color: black) { 14 | th, td { 15 | border: { 16 | right: $width solid $color; 17 | bottom: $width solid $color; 18 | left-width: 0px; 19 | top-width: 0px; }; 20 | &:last-child, 21 | &.last { 22 | border-right-width: 0px; } } 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 | tbody, tfoot { 28 | tr:last-child { 29 | th, td { 30 | border-bottom-width: 0px; } } 31 | tr.last { 32 | th, td { 33 | border-bottom-width: 0px; } } } } 34 | -------------------------------------------------------------------------------- /lib/compass/utilities/tables/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | @mixin table-scaffolding { 2 | th { 3 | text-align: center; 4 | font-weight: bold; } 5 | td, 6 | th { 7 | padding: 2px; 8 | &.numeric { 9 | text-align: right; } } } 10 | -------------------------------------------------------------------------------- /lib/compass/utilities/text/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/text/ellipsis' instead."; 2 | 3 | @import "../../typography/text/ellipsis"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/text/_nowrap.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/text/nowrap' instead."; 2 | 3 | @import "../../typography/text/nowrap"; 4 | -------------------------------------------------------------------------------- /lib/compass/utilities/text/_replacement.scss: -------------------------------------------------------------------------------- 1 | @warn "This import is deprecated. Use 'compass/typography/text/replacement' instead."; 2 | 3 | @import "../../typography/text/replacement"; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compass-mixins", 3 | "version": "0.12.12", 4 | "author": { 5 | "name": "Guillaume Balaine", 6 | "email": "igosuki@gmail.com", 7 | "url": "https://github.com/Igosuki" 8 | }, 9 | "contributors": [ 10 | { 11 | "name": "Michael Heillein", 12 | "url": "https://github.com/michaek" 13 | } 14 | ], 15 | "description": "Compass stylesheets", 16 | "repository": { 17 | "type": "git", 18 | "url": "git://github.com/Igosuki/compass-mixins.git" 19 | }, 20 | "main": "lib/_compass.scss", 21 | "keywords": [ 22 | "compass", 23 | "mixins", 24 | "sass", 25 | "css3" 26 | ], 27 | "scripts": { 28 | "test": "./node_modules/jasmine-node/bin/jasmine-node test" 29 | }, 30 | "license": "MIT", 31 | "ignore": [ 32 | "**/.*", 33 | "node_modules", 34 | "bower_components", 35 | "test", 36 | "tests" 37 | ], 38 | "devDependencies": { 39 | "chalk": "^0.5.1", 40 | "jasmine-node": "^1.14.5", 41 | "sass": "^1.32.8" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /test/compileSpec.js: -------------------------------------------------------------------------------- 1 | var sass = require('sass'); 2 | var chalk = require('chalk'); 3 | 4 | describe("Imports", function () { 5 | it("should import all the provided files without an error", function (done) { 6 | var success = jasmine.createSpy('ImportSuccess'); 7 | 8 | function complete() { 9 | expect(success).toHaveBeenCalled(); 10 | done(); 11 | } 12 | 13 | ["imports.scss", "imports_animation.scss"].forEach(function(importFile) { 14 | sass.render({ 15 | file: __dirname + "/" + importFile, 16 | }, function(e, s) { 17 | if (e) { 18 | console.log(chalk.red("Sass error:"), e); 19 | } else { 20 | success(); 21 | } 22 | complete(); 23 | }); 24 | }); 25 | 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /test/css3/borderRadiusSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | describe("CSS3 Border Radius", function () { 5 | 6 | it("should generate a border radius", function (done) { 7 | render(ruleset('$experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; @include border-radius(0, 0)'), function(output, err) { 8 | expect(output).toBe(ruleset('-webkit-border-radius:0 0;border-radius:0 / 0')); 9 | done(); 10 | }, ['compass/css3/border-radius']); 11 | }); 12 | 13 | }); 14 | -------------------------------------------------------------------------------- /test/css3/boxShadowSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | describe("CSS3 Box Shadow", function () { 5 | 6 | it("should generate a default box shadow", function (done) { 7 | render(ruleset('$default-box-shadow-inset: inset !global; $default-box-shadow-h-offset: 23px !global; $default-box-shadow-v-offset: 24px !global; $default-box-shadow-blur: 17px !global; $default-box-shadow-spread: 15px !global; $default-box-shadow-color: #deadbe !global; $experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; @include box-shadow'), function(output, err) { 8 | expect(output).toBe(ruleset('-webkit-box-shadow:inset 23px 24px 17px 15px #deadbe;box-shadow:inset 23px 24px 17px 15px #deadbe')); 9 | done(); 10 | }, ['compass/css3/box-shadow']); 11 | }); 12 | 13 | }); 14 | 15 | -------------------------------------------------------------------------------- /test/css3/boxSizingSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | describe("CSS3 Boz Sizing", function () { 5 | 6 | describe("CSS3 an argument", function () { 7 | 8 | it("should generate a box-size property", function (done) { 9 | render(ruleset('$experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; @include box-sizing(border-box)'), function(output, err) { 10 | expect(output).toBe(ruleset('-webkit-box-sizing:border-box;box-sizing:border-box')); 11 | done(); 12 | }, ['compass/css3/box-sizing']); 13 | }); 14 | 15 | }); 16 | 17 | describe("CSS3 an empty argument", function () { 18 | describe("in a ruleset without other properties", function () { 19 | it("should generate nothing", function (done) { 20 | render(ruleset('$experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; @include box-sizing("")'), function(output, err) { 21 | expect(output).toBe(''); 22 | done(); 23 | }, ['compass/css3/box-sizing']); 24 | }); 25 | }); 26 | 27 | describe("in a ruleset with other properties", function () { 28 | it("should generate the other properties", function (done) { 29 | render(ruleset('$experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; foo: bar; @include box-sizing("")'), function(output, err) { 30 | expect(output).toBe(ruleset('foo:bar')); 31 | done(); 32 | }, ['compass/css3/box-sizing']); 33 | }); 34 | }); 35 | }); 36 | 37 | }); 38 | -------------------------------------------------------------------------------- /test/css3/columnsSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | describe("CSS3 Columns", function () { 5 | 6 | it("should generate column-span properties with value: `none`", function (done) { 7 | var input = '@include column-span(none);', 8 | expectation = '-webkit-column-span:none;-moz-column-span:none;-ms-column-span:none;-o-column-span:none;column-span:none'; 9 | 10 | render(ruleset(input), function(output, err) { 11 | expect(output).toBe(ruleset(expectation)); 12 | done(); 13 | }, ['compass/css3/columns']); 14 | }); 15 | 16 | it("should generate column-span properties with value: `all`", function (done) { 17 | var input = '@include column-span(all);', 18 | expectation = '-webkit-column-span:all;-moz-column-span:all;-ms-column-span:all;-o-column-span:all;column-span:all'; 19 | 20 | render(ruleset(input), function(output, err) { 21 | expect(output).toBe(ruleset(expectation)); 22 | done(); 23 | }, ['compass/css3/columns']); 24 | }); 25 | 26 | it("should generate column-span properties with invalid value", function (done) { 27 | var input = '@include column-span(3);', 28 | expectation = '-webkit-column-span:3;-moz-column-span:3;-ms-column-span:3;-o-column-span:3;column-span:3'; 29 | 30 | render(ruleset(input), function(output, err) { 31 | expect(output).toBe(ruleset(expectation)); 32 | done(); 33 | }, ['compass/css3/columns']); 34 | }); 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /test/css3/flexboxSpec.js: -------------------------------------------------------------------------------- 1 | var compareIt = require('../helper/compare'); 2 | 3 | describe("Flexbox", function() { 4 | var flexShould = function(spec, ruleset, output) { 5 | return compareIt("should " + spec, ruleset, output, 6 | ['compass/css3/flexbox']); 7 | }; 8 | 9 | compareIt("should output all flexbox properties", 10 | "@include flexbox(( display: flex, flex-direction: row-reverse, flex-wrap: wrap-reverse, flex-flow: row-reverse wrap-reverse, order: 1, flex: 1 0 auto, flex-grow: 1, flex-shrink: 0, flex-basis: auto, justify-content: flex-start, align-items: flex-start, align-self: flex-start, align-content: flex-start));", 11 | "display:-webkit-flex;display:flex;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;-webkit-flex-flow:row-reverse wrap-reverse;flex-flow:row-reverse wrap-reverse;-webkit-order:1;order:1;-webkit-flex:1 0 auto;flex:1 0 auto;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-shrink:0;flex-shrink:0;-webkit-flex-basis:auto;flex-basis:auto;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-align-self:flex-start;align-self:flex-start;-webkit-align-content:flex-start;align-content:flex-start", 12 | ['compass/css3/flexbox']); 13 | }); 14 | -------------------------------------------------------------------------------- /test/css3/imagesSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | describe("CSS3 Images", function () { 5 | 6 | it("should generate a background", function (done) { 7 | render(ruleset('@include background(ok);'), function(output, err) { 8 | expect(output).toBe(ruleset('background:-owg-ok;background:-webkit-ok;background:-moz-ok;background:-o-ok;background:ok')); 9 | done(); 10 | }, ['compass/css3/images']); 11 | }); 12 | 13 | it("should generate multiple backgrounds", function (done) { 14 | render(ruleset('$support-for-original-webkit-gradients: false !global; $experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; @include background(a, b, c)'), function(output, err) { 15 | expect(output).toBe(ruleset('background:-webkit-a,-webkit-b,-webkit-c;background:a,b,c')); 16 | done(); 17 | }, ['compass/css3/images']); 18 | }); 19 | 20 | it("should generate multiple backgrounds of different types", function (done) { 21 | render(ruleset('$support-for-original-webkit-gradients: false !global; $experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; @include background(#fff, url(1.gif), linear-gradient(white, black))'), function(output, err) { 22 | expect(output).toBe(ruleset('background:#fff,url(1.gif),-webkit-linear-gradient(white, black);background:#fff,url(1.gif),linear-gradient(white, black)')); 23 | done(); 24 | }, ['compass/css3/images']); 25 | }); 26 | 27 | }); 28 | -------------------------------------------------------------------------------- /test/css3/pieSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | describe("Experimentel PIE support", function () { 5 | 6 | it("should not prefix linear-gradient with -pie-", function (done) { 7 | render(ruleset('@include background(linear-gradient(to right, white, black));'), function(output, err) { 8 | expect(output).toBe(ruleset('background:-owg-linear-gradient(to right, white, black);background:-webkit-linear-gradient(to right, white, black);background:-moz-linear-gradient(to right, white, black);background:-o-linear-gradient(to right, white, black);-pie-background:linear-gradient(to right, white, black);background:linear-gradient(to right, white, black)')); 9 | done(); 10 | }, ['compass/css3/pie', 'compass/css3/images']); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /test/css3/transitionSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | describe("CSS3 Transition", function () { 5 | 6 | it("should generate a transition", function (done) { 7 | render(ruleset('$experimental-support-for-mozilla: false !global; $experimental-support-for-opera: false !global; @include transition(ok 0s);'), function(output, err) { 8 | expect(output).toBe(ruleset('-webkit-transition:ok 0s;transition:ok 0s')); 9 | done(); 10 | }, ['compass/css3/transition']); 11 | }); 12 | 13 | }); 14 | -------------------------------------------------------------------------------- /test/functionsSpec.js: -------------------------------------------------------------------------------- 1 | var render = require('./helper/render'); 2 | var property = require('./helper/property'); 3 | 4 | describe("List Functions", function () { 5 | 6 | // This is verifying a function that's part of libsass that Compass also provided. 7 | it("should compact a list with false values", function (done) { 8 | render(property('compact(one,false,three)'), function(output, err) { 9 | expect(output).toBe(property('one,three')); 10 | done(); 11 | }); 12 | }); 13 | 14 | it("should calculate a list length", function(done) { 15 | render('$list: one, two;' + property('-compass-list-size($list)'), function(output, err) { 16 | expect(output).toBe(property('2')); 17 | done(); 18 | }); 19 | }); 20 | 21 | it("should calculate a list length with a space delimiter", function(done) { 22 | render('$list: one two;' + property('-compass-list-size($list)'), function(output, err) { 23 | expect(output).toBe(property('2')); 24 | done(); 25 | }); 26 | }); 27 | 28 | it("should slice a list", function(done) { 29 | render('$list: one, two, three, four;' + property('-compass-slice($list, 2, 3)'), function(output, err) { 30 | expect(output).toBe(property('two,three')); 31 | done(); 32 | }); 33 | }); 34 | 35 | it("should slice a list to the end", function(done) { 36 | render('$list: one, two, three, four;' + property('-compass-slice($list, 2)'), function(output, err) { 37 | expect(output).toBe(property('two,three,four')); 38 | done(); 39 | }); 40 | }); 41 | 42 | it("should reject values from a list", function(done) { 43 | render('$list: one, two, three, four;' + property('reject($list, two, four)'), function(output, err) { 44 | expect(output).toBe(property('one,three')); 45 | done(); 46 | }); 47 | }); 48 | 49 | it("should get the first value of a list", function(done) { 50 | render('$list: one, two, three, four;' + property('first-value-of($list)'), function(output, err) { 51 | expect(output).toBe(property('one')); 52 | done(); 53 | }); 54 | }); 55 | 56 | it("should create a space-delimited list", function(done) { 57 | render(property('-compass-space-list(a, b, c)'), function(output, err) { 58 | expect(output).toBe(property('a b c')); 59 | done(); 60 | }); 61 | }); 62 | 63 | }); 64 | 65 | describe("Cross Browser Functions", function () { 66 | 67 | it("should prefix a property", function(done) { 68 | render(property('prefix(-webkit, x)'), function(output, err) { 69 | expect(output).toBe(property('-webkit-x')); 70 | done(); 71 | }); 72 | }); 73 | 74 | it("should prefix a list of properties", function(done) { 75 | render(property('prefix(-webkit, x, y, z)'), function(output, err) { 76 | expect(output).toBe(property('-webkit-x,-webkit-y,-webkit-z')); 77 | done(); 78 | }); 79 | }); 80 | 81 | it("should prefix a list of complex properties", function(done) { 82 | render(property('prefix(-webkit, linear-gradient(-45deg, black 25%, transparent 75%, transparent), linear-gradient(-45deg, #000 25%, transparent 75%, transparent))'), function(output, err) { 83 | expect(output).toBe(property('-webkit-linear-gradient(-45deg, black 25%, transparent 75%, transparent),-webkit-linear-gradient(-45deg, #000 25%, transparent 75%, transparent)')); 84 | done(); 85 | }); 86 | }); 87 | 88 | it("should prefix a list of properties as a single argument", function(done) { 89 | render('$list: x, y, z;' + property('prefix(-webkit, $list)'), function(output, err) { 90 | expect(output).toBe(property('-webkit-x,-webkit-y,-webkit-z')); 91 | done(); 92 | }); 93 | }); 94 | 95 | it("should prefix a property with a browser function", function(done){ 96 | render(property('-webkit(x)'), function(output, err) { 97 | expect(output).toBe(property('-webkit-x')); 98 | done(); 99 | }); 100 | }); 101 | 102 | it("should prefix a list of properties with a browser function", function(done) { 103 | render(property('-webkit(x, y, z)'), function(output, err) { 104 | expect(output).toBe(property('-webkit-x,-webkit-y,-webkit-z')); 105 | done(); 106 | }); 107 | }); 108 | 109 | it("should prefix a list of properties with a browser function as a single argument", function(done) { 110 | render('$list: x, y, z;' + property('-webkit($list)'), function(output, err) { 111 | expect(output).toBe(property('-webkit-x,-webkit-y,-webkit-z')); 112 | done(); 113 | }); 114 | }); 115 | 116 | it("should not prefix numbers or colors", function(done){ 117 | render(property('prefixed(-ok, rgb(0,0,0))')+property('prefixed(-ok, url(1.gif))')+property('prefixed(-ok, ok)'), function(output, err) { 118 | expect(output).toBe(property('false')+property('false')+property('true')); 119 | done(); 120 | }); 121 | }); 122 | 123 | }); 124 | 125 | describe("Gradient Functions", function () { 126 | 127 | it("should prefix a list with color stops", function(done) { 128 | render(property('prefix(-webkit, linear-gradient(-45deg, color-stops(black 25%, transparent 75%, transparent)), linear-gradient(-45deg, color-stops(#000 25%, transparent 75%, transparent)))'), function(output, err) { 129 | expect(output).toBe(property('-webkit-linear-gradient(-45deg, black 25%, transparent 75%, transparent),-webkit-linear-gradient(-45deg, #000 25%, transparent 75%, transparent)')); 130 | done(); 131 | }); 132 | }); 133 | 134 | }); -------------------------------------------------------------------------------- /test/helper/compare.js: -------------------------------------------------------------------------------- 1 | var render = require('../helper/render'); 2 | var ruleset = require('../helper/ruleset'); 3 | 4 | module.exports = function(spec, inputRuleset, expectedOutput, imports) { 5 | return it(spec, function (done) { 6 | render(ruleset(inputRuleset), function(output, err) { 7 | expect(output).toBe(ruleset(expectedOutput)); 8 | done(); 9 | }, imports); 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /test/helper/property.js: -------------------------------------------------------------------------------- 1 | module.exports = function(prop) { 2 | return 'a{b:'+prop+'}'; 3 | } 4 | -------------------------------------------------------------------------------- /test/helper/render.js: -------------------------------------------------------------------------------- 1 | var sass = require('sass'); 2 | var libDir = __dirname.replace(/test\/helper$/, 'lib'); 3 | var chalk = require('chalk'); 4 | 5 | module.exports = function(data, callback, imports) { 6 | imports = imports ? imports.map(function(i){ return '@import "'+libDir+'/'+i+'";'}) : []; 7 | 8 | sass.render({ 9 | data: '@import "'+libDir+'/compass/functions";' + imports.join('') + data, 10 | outputStyle: 'compressed', 11 | includePaths: [__dirname], 12 | }, function(err, output) { 13 | if (err) { 14 | console.log(chalk.red("Sass error:"), err); 15 | callback('', err); 16 | } else { 17 | callback(output.css.toString().trim()); 18 | } 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /test/helper/ruleset.js: -------------------------------------------------------------------------------- 1 | module.exports = function(rules) { 2 | return 'a{'+rules+'}'; 3 | } -------------------------------------------------------------------------------- /test/imports.scss: -------------------------------------------------------------------------------- 1 | @import "../lib/compass"; 2 | -------------------------------------------------------------------------------- /test/imports_animation.scss: -------------------------------------------------------------------------------- 1 | @import "../lib/animate"; 2 | --------------------------------------------------------------------------------