From a049d66ca2bc8e36916e76eb6f45b0626adaf582 Mon Sep 17 00:00:00 2001 From: Guillaume Balaine Date: Thu, 12 Sep 2013 16:10:35 -0400 Subject: [PATCH] Initial commit with bower packaging --- LICENSE.markdown | 29 + README.markdown | 7 + bower.json | 23 + lib/_animation.scss | 2 + lib/_compass.scss | 4 + lib/_lemonade.scss | 38 ++ lib/animation/_animate.scss | 31 + lib/animation/_core.scss | 127 ++++ lib/animation/_shared.scss | 22 + lib/animation/animate/_attention-seekers.scss | 152 +++++ lib/animation/animate/_bouncing.scss | 3 + lib/animation/animate/_classes.scss | 21 + lib/animation/animate/_fading.scss | 3 + lib/animation/animate/_flippers.scss | 87 +++ lib/animation/animate/_lightspeed.scss | 24 + lib/animation/animate/_rotating.scss | 3 + lib/animation/animate/_specials.scss | 42 ++ .../animate/bouncing/_bouncing-entrances.scss | 68 ++ .../animate/bouncing/_bouncing-exits.scss | 60 ++ .../animate/fading/_fading-entrances.scss | 86 +++ .../animate/fading/_fading-exits.scss | 86 +++ .../animate/rotating/_rotating-entrances.scss | 58 ++ .../animate/rotating/_rotating-exits.scss | 58 ++ lib/compass/_css3.scss | 20 + lib/compass/_layout.scss | 3 + lib/compass/_reset-legacy.scss | 3 + lib/compass/_reset.scss | 3 + lib/compass/_support.scss | 40 ++ lib/compass/_typography.scss | 4 + lib/compass/_utilities.scss | 9 + lib/compass/css3/_appearance.scss | 17 + lib/compass/css3/_background-clip.scss | 43 ++ lib/compass/css3/_background-origin.scss | 42 ++ lib/compass/css3/_background-size.scss | 26 + lib/compass/css3/_border-radius.scss | 130 ++++ lib/compass/css3/_box-shadow.scss | 76 +++ lib/compass/css3/_box-sizing.scss | 13 + lib/compass/css3/_box.scss | 111 ++++ lib/compass/css3/_columns.scss | 157 +++++ lib/compass/css3/_filter.scss | 23 + lib/compass/css3/_font-face.scss | 48 ++ lib/compass/css3/_hyphenation.scss | 77 +++ lib/compass/css3/_images.scss | 132 ++++ lib/compass/css3/_inline-block.scss | 22 + lib/compass/css3/_opacity.scss | 19 + lib/compass/css3/_pie.scss | 73 +++ lib/compass/css3/_regions.scss | 22 + lib/compass/css3/_shared.scss | 38 ++ lib/compass/css3/_text-shadow.scss | 87 +++ lib/compass/css3/_transform-legacy.scss | 87 +++ lib/compass/css3/_transform.scss | 598 ++++++++++++++++++ lib/compass/css3/_transition.scss | 221 +++++++ lib/compass/css3/_user-interface.scss | 17 + lib/compass/layout/_grid-background.scss | 178 ++++++ lib/compass/layout/_sticky-footer.scss | 23 + lib/compass/layout/_stretching.scss | 24 + lib/compass/reset/_utilities-legacy.scss | 135 ++++ lib/compass/reset/_utilities.scss | 142 +++++ lib/compass/typography/_links.scss | 3 + lib/compass/typography/_lists.scss | 4 + lib/compass/typography/_text.scss | 4 + lib/compass/typography/_vertical_rhythm.scss | 221 +++++++ lib/compass/typography/links/_hover-link.scss | 5 + .../typography/links/_link-colors.scss | 28 + .../typography/links/_unstyled-link.scss | 7 + lib/compass/typography/lists/_bullets.scss | 34 + .../typography/lists/_horizontal-list.scss | 61 ++ .../typography/lists/_inline-block-list.scss | 50 ++ .../typography/lists/_inline-list.scss | 44 ++ lib/compass/typography/text/_ellipsis.scss | 25 + lib/compass/typography/text/_force-wrap.scss | 12 + lib/compass/typography/text/_nowrap.scss | 2 + lib/compass/typography/text/_replacement.scss | 68 ++ lib/compass/utilities/_color.scss | 1 + lib/compass/utilities/_general.scss | 6 + lib/compass/utilities/_links.scss | 5 + lib/compass/utilities/_lists.scss | 6 + lib/compass/utilities/_print.scss | 17 + lib/compass/utilities/_sprites.scss | 2 + lib/compass/utilities/_tables.scss | 3 + lib/compass/utilities/_text.scss | 5 + lib/compass/utilities/color/_contrast.scss | 28 + lib/compass/utilities/general/_clearfix.scss | 44 ++ lib/compass/utilities/general/_float.scss | 30 + lib/compass/utilities/general/_hacks.scss | 46 ++ lib/compass/utilities/general/_min.scss | 16 + lib/compass/utilities/general/_reset.scss | 2 + lib/compass/utilities/general/_tabs.scss | 1 + lib/compass/utilities/general/_tag-cloud.scss | 18 + lib/compass/utilities/links/_hover-link.scss | 3 + lib/compass/utilities/links/_link-colors.scss | 3 + .../utilities/links/_unstyled-link.scss | 3 + lib/compass/utilities/lists/_bullets.scss | 3 + .../utilities/lists/_horizontal-list.scss | 3 + .../utilities/lists/_inline-block-list.scss | 3 + lib/compass/utilities/lists/_inline-list.scss | 3 + lib/compass/utilities/sprites/_base.scss | 66 ++ .../utilities/sprites/_sprite-img.scss | 79 +++ .../tables/_alternating-rows-and-columns.scss | 22 + lib/compass/utilities/tables/_borders.scss | 33 + .../utilities/tables/_scaffolding.scss | 9 + lib/compass/utilities/text/_ellipsis.scss | 3 + lib/compass/utilities/text/_nowrap.scss | 3 + lib/compass/utilities/text/_replacement.scss | 3 + 104 files changed, 4734 insertions(+) create mode 100644 LICENSE.markdown create mode 100644 README.markdown create mode 100644 bower.json create mode 100644 lib/_animation.scss create mode 100644 lib/_compass.scss create mode 100644 lib/_lemonade.scss create mode 100644 lib/animation/_animate.scss create mode 100644 lib/animation/_core.scss create mode 100644 lib/animation/_shared.scss create mode 100644 lib/animation/animate/_attention-seekers.scss create mode 100644 lib/animation/animate/_bouncing.scss create mode 100644 lib/animation/animate/_classes.scss create mode 100644 lib/animation/animate/_fading.scss create mode 100644 lib/animation/animate/_flippers.scss create mode 100644 lib/animation/animate/_lightspeed.scss create mode 100644 lib/animation/animate/_rotating.scss create mode 100644 lib/animation/animate/_specials.scss create mode 100644 lib/animation/animate/bouncing/_bouncing-entrances.scss create mode 100644 lib/animation/animate/bouncing/_bouncing-exits.scss create mode 100644 lib/animation/animate/fading/_fading-entrances.scss create mode 100644 lib/animation/animate/fading/_fading-exits.scss create mode 100644 lib/animation/animate/rotating/_rotating-entrances.scss create mode 100644 lib/animation/animate/rotating/_rotating-exits.scss create mode 100644 lib/compass/_css3.scss create mode 100644 lib/compass/_layout.scss create mode 100644 lib/compass/_reset-legacy.scss create mode 100644 lib/compass/_reset.scss create mode 100644 lib/compass/_support.scss create mode 100644 lib/compass/_typography.scss create mode 100644 lib/compass/_utilities.scss create mode 100644 lib/compass/css3/_appearance.scss create mode 100644 lib/compass/css3/_background-clip.scss create mode 100644 lib/compass/css3/_background-origin.scss create mode 100644 lib/compass/css3/_background-size.scss create mode 100644 lib/compass/css3/_border-radius.scss create mode 100644 lib/compass/css3/_box-shadow.scss create mode 100644 lib/compass/css3/_box-sizing.scss create mode 100644 lib/compass/css3/_box.scss create mode 100644 lib/compass/css3/_columns.scss create mode 100644 lib/compass/css3/_filter.scss create mode 100644 lib/compass/css3/_font-face.scss create mode 100644 lib/compass/css3/_hyphenation.scss create mode 100644 lib/compass/css3/_images.scss create mode 100644 lib/compass/css3/_inline-block.scss create mode 100644 lib/compass/css3/_opacity.scss create mode 100644 lib/compass/css3/_pie.scss create mode 100644 lib/compass/css3/_regions.scss create mode 100644 lib/compass/css3/_shared.scss create mode 100644 lib/compass/css3/_text-shadow.scss create mode 100644 lib/compass/css3/_transform-legacy.scss create mode 100644 lib/compass/css3/_transform.scss create mode 100644 lib/compass/css3/_transition.scss create mode 100644 lib/compass/css3/_user-interface.scss create mode 100644 lib/compass/layout/_grid-background.scss create mode 100644 lib/compass/layout/_sticky-footer.scss create mode 100644 lib/compass/layout/_stretching.scss create mode 100644 lib/compass/reset/_utilities-legacy.scss create mode 100644 lib/compass/reset/_utilities.scss create mode 100644 lib/compass/typography/_links.scss create mode 100644 lib/compass/typography/_lists.scss create mode 100644 lib/compass/typography/_text.scss create mode 100644 lib/compass/typography/_vertical_rhythm.scss create mode 100644 lib/compass/typography/links/_hover-link.scss create mode 100644 lib/compass/typography/links/_link-colors.scss create mode 100644 lib/compass/typography/links/_unstyled-link.scss create mode 100644 lib/compass/typography/lists/_bullets.scss create mode 100644 lib/compass/typography/lists/_horizontal-list.scss create mode 100644 lib/compass/typography/lists/_inline-block-list.scss create mode 100644 lib/compass/typography/lists/_inline-list.scss create mode 100644 lib/compass/typography/text/_ellipsis.scss create mode 100644 lib/compass/typography/text/_force-wrap.scss create mode 100644 lib/compass/typography/text/_nowrap.scss create mode 100644 lib/compass/typography/text/_replacement.scss create mode 100644 lib/compass/utilities/_color.scss create mode 100644 lib/compass/utilities/_general.scss create mode 100644 lib/compass/utilities/_links.scss create mode 100644 lib/compass/utilities/_lists.scss create mode 100644 lib/compass/utilities/_print.scss create mode 100644 lib/compass/utilities/_sprites.scss create mode 100644 lib/compass/utilities/_tables.scss create mode 100644 lib/compass/utilities/_text.scss create mode 100644 lib/compass/utilities/color/_contrast.scss create mode 100644 lib/compass/utilities/general/_clearfix.scss create mode 100644 lib/compass/utilities/general/_float.scss create mode 100644 lib/compass/utilities/general/_hacks.scss create mode 100644 lib/compass/utilities/general/_min.scss create mode 100644 lib/compass/utilities/general/_reset.scss create mode 100644 lib/compass/utilities/general/_tabs.scss create mode 100644 lib/compass/utilities/general/_tag-cloud.scss create mode 100644 lib/compass/utilities/links/_hover-link.scss create mode 100644 lib/compass/utilities/links/_link-colors.scss create mode 100644 lib/compass/utilities/links/_unstyled-link.scss create mode 100644 lib/compass/utilities/lists/_bullets.scss create mode 100644 lib/compass/utilities/lists/_horizontal-list.scss create mode 100644 lib/compass/utilities/lists/_inline-block-list.scss create mode 100644 lib/compass/utilities/lists/_inline-list.scss create mode 100644 lib/compass/utilities/sprites/_base.scss create mode 100644 lib/compass/utilities/sprites/_sprite-img.scss create mode 100644 lib/compass/utilities/tables/_alternating-rows-and-columns.scss create mode 100644 lib/compass/utilities/tables/_borders.scss create mode 100644 lib/compass/utilities/tables/_scaffolding.scss create mode 100644 lib/compass/utilities/text/_ellipsis.scss create mode 100644 lib/compass/utilities/text/_nowrap.scss create mode 100644 lib/compass/utilities/text/_replacement.scss diff --git a/LICENSE.markdown b/LICENSE.markdown new file mode 100644 index 0000000..8e61ae6 --- /dev/null +++ b/LICENSE.markdown @@ -0,0 +1,29 @@ +Copyright (c) 2009 Christopher M. Eppstein + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. +No attribution is required by products that make use of this software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Except as contained in this notice, the name(s) of the above copyright +holders shall not be used in advertising or otherwise to promote the sale, +use or other dealings in this Software without prior written authorization. + +Contributors to this project agree to grant all rights to the copyright +holder of the primary product. Attribution is maintained in the source +control history of the product. diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..3fd577e --- /dev/null +++ b/README.markdown @@ -0,0 +1,7 @@ +# Compass SASS Stylesheets +This is a repository to pull SASS style sheets on bower, and enjoy the compass mixins by using libsass for faster compilation. I made no modifications to the original stylesheets from the [original repository](https://github.com/chriseppstein/compass.git) + +## License +Copyright (c) 2008-2009 Christopher M. Eppstein
+All Rights Reserved.
+Released under a [slightly modified MIT License](compass/blob/stable/LICENSE.markdown). diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..6eed410 --- /dev/null +++ b/bower.json @@ -0,0 +1,23 @@ +{ + "name": "compass-mixins", + "version": "1.0.0", + "authors": [ + "Guillaume Balaine " + ], + "description": "Compass stylesheets", + "main": "lib/_compass.scss", + "keywords": [ + "compass", + "mixins", + "sass", + "css3" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/lib/_animation.scss b/lib/_animation.scss new file mode 100644 index 0000000..823a727 --- /dev/null +++ b/lib/_animation.scss @@ -0,0 +1,2 @@ +// Core imported by default. You can also import 'animate' for predefined animations. +@import "animation/core"; diff --git a/lib/_compass.scss b/lib/_compass.scss new file mode 100644 index 0000000..812a0cf --- /dev/null +++ b/lib/_compass.scss @@ -0,0 +1,4 @@ +@import "compass/utilities"; +@import "compass/typography"; +@import "compass/css3"; +@import "animation"; diff --git a/lib/_lemonade.scss b/lib/_lemonade.scss new file mode 100644 index 0000000..226d926 --- /dev/null +++ b/lib/_lemonade.scss @@ -0,0 +1,38 @@ +@mixin image-dimensions($file) { + height: image-height($file); + width: image-width($file); +} + +@mixin sprite-image($file) { + background: sprite-image($file) $repeat; +} + +@mixin sized-sprite-image($file) { + background: sprite-image($file); + @include image-dimensions($file); +} + +@mixin sprite-folder($folder, $image-dimensions: false) { + .#{$folder} { + @if $image-dimensions { + background: sprite-url($folder); + } + @else { + background: sprite-url($folder) no-repeat; + } + } + @for $i from 0 to sprite-files-in-folder($folder) { + $file: sprite-file-from-folder($folder, $i); + .#{$folder}-#{image-basename($file)} { + @extend .#{$folder}; + background-position: sprite-position(sprite-file-from-folder($folder, $i)); + @if $image-dimensions { + @include image-dimensions($file); + } + } + } +} + +@mixin sized-sprite-folder($folder) { + @include sprite-folder($folder, true); +} \ No newline at end of file diff --git a/lib/animation/_animate.scss b/lib/animation/_animate.scss new file mode 100644 index 0000000..d9e94ae --- /dev/null +++ b/lib/animation/_animate.scss @@ -0,0 +1,31 @@ +// --------------------------------------------------------------------------- +// Animations from Animate.css +// Author : Dan Eden +// URL : http://daneden.me/animate/ +// +// Attention seekers +// - flash bounce shake tada swing wobble pulse +// Fading entrances +// - fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig +// Fading exits +// - fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig +// Bouncing entrances +// - bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight +// Bouncing exits +// - bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight +// Rotating entrances +// - rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight +// Rotating exits +// - rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight +// Lightspeed +// - lightSpeedIn lightSpeedOut +// Specials +// - hinge rollIn rollOut +// --------------------------------------------------------------------------- +@import "animate/attention-seekers"; +@import "animate/bouncing"; +@import "animate/fading"; +@import "animate/flippers"; +@import "animate/lightspeed"; +@import "animate/rotating"; +@import "animate/specials"; diff --git a/lib/animation/_core.scss b/lib/animation/_core.scss new file mode 100644 index 0000000..7be3537 --- /dev/null +++ b/lib/animation/_core.scss @@ -0,0 +1,127 @@ +@import "shared"; + +// CSS Animations. + +// Apply an animation property and value with the correct browser support +@mixin animation-support($property, $value) { + @include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); } + +// Name of any animation as a string. +$default-animation-name : false !default; + +// Duration of the entire animation in seconds. +$default-animation-duration : false !default; + +// Delay for start of animation in seconds. +$default-animation-delay : false !default; + +// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)] +$default-animation-timing-function : false !default; + +// The number of times an animation cycle is played. [infinite | $number] +$default-animation-iteration-count : false !default; + +// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate] +$default-animation-direction : false !default; + +// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both] +$default-animation-fill-mode : false !default; + +// Whether the animation is running or paused. [running | paused] +$default-animation-play-state : false !default; + +// Create a named animation sequence that can be applied to elements later. +// +// $name - The name of your animation. +// @content - The keyframes of the animation. +@mixin keyframes( + $name, + $moz: $experimental-support-for-mozilla, + $webkit: $experimental-support-for-webkit, + $o: $experimental-support-for-opera, + $ms: $experimental-support-for-microsoft, + $khtml: $experimental-support-for-khtml, + $official: true +) { + @if $moz { + @include with-only-support-for($moz: true) { + @-moz-keyframes #{$name} { @content; } + } + } + @if $webkit { + @include with-only-support-for($webkit: true) { + @-webkit-keyframes #{$name} { @content; } + } + } + @if $o { + @include with-only-support-for($o: true) { + @-o-keyframes #{$name} { @content; } + } + } + @if $ms { + @include with-only-support-for($ms: true) { + @-ms-keyframes #{$name} { @content; } + } + } + @if $khtml { + @include with-only-support-for($khtml: true) { + @-khtml-keyframes #{$name} { @content; } + } + } + @if $official { + @include with-only-support-for { + @keyframes #{$name} { @content; } + } + } +} + +// Apply 1-10 animation names. +@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) { + $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10); + @include animation-support(animation-name, $name); } + +// Apply 1-10 animation durations. +@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) { + $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10); + @include animation-support(animation-duration, $duration); } + +// Apply 1-10 animation delays. +@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) { + $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10); + @include animation-support(animation-delay, $delay); } + +// Apply 1-10 animation timing functions. +@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) { + $function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10); + @include animation-support(animation-timing-function, $function); } + +// Apply 1-10 animation iteration counts. +@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) { + $count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10); + @include animation-support(animation-iteration-count, $count); } + +// Apply 1-10 animation directions. +@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) { + $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10); + @include animation-support(animation-direction, $direction); } + +// Apply 1-10 animation fill modes. +@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) { + $mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10); + @include animation-support(animation-fill-mode, $mode); } + +// Apply 1-10 animation play states. +@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) { + $state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10); + @include animation-support(animation-play-state, $state); } + +// Shortcut to apply a named animation to an element, with all the settings. +// +// $animation-1 : Name and settings for the first animation. [ | default] +// ... +// $animation-10 : Name and settings for the tenth animation. +@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) { + @if $animation-1 == default { + $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)); } + $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10); + @include animation-support(animation, $animation); } diff --git a/lib/animation/_shared.scss b/lib/animation/_shared.scss new file mode 100644 index 0000000..4888cb1 --- /dev/null +++ b/lib/animation/_shared.scss @@ -0,0 +1,22 @@ +@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) { + $experimental-support-for-mozilla: $moz; + $experimental-support-for-webkit: $webkit; + $experimental-support-for-microsoft: $ms; + $experimental-support-for-opera: $o; + $experimental-support-for-khtml: $khtml; +} + +@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) { + // Capture the current state + $original-moz: $experimental-support-for-mozilla; + $original-webkit: $experimental-support-for-webkit; + $original-o: $experimental-support-for-opera; + $original-ms: $experimental-support-for-microsoft; + $original-khtml: $experimental-support-for-khtml; + + @include set-experimental-support($moz, $webkit, $ms, $o, $khtml); + + @content; + + @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml); +} \ No newline at end of file diff --git a/lib/animation/animate/_attention-seekers.scss b/lib/animation/animate/_attention-seekers.scss new file mode 100644 index 0000000..0248d90 --- /dev/null +++ b/lib/animation/animate/_attention-seekers.scss @@ -0,0 +1,152 @@ +// --------------------------------------------------------------------------- +@include keyframes(flash) { + 0% { + opacity: 1; } + 25% { + opacity: 0; } + 50% { + opacity: 1; } + 75% { + opacity: 0; } + 100% { + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounce) { + 0% { + @include translateY(0); } + 20% { + @include translateY(0); } + 40% { + @include translateY(-30px); } + 50% { + @include translateY(0); } + 60% { + @include translateY(-15px); } + 80% { + @include translateY(0); } + 100% { + @include translateY(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(shake) { + 0% { + @include translateX(0); } + 10% { + @include translateX(-10px); } + 20% { + @include translateX(10px); } + 30% { + @include translateX(-10px); } + 40% { + @include translateX(10px); } + 50% { + @include translateX(-10px); } + 60% { + @include translateX(10px); } + 70% { + @include translateX(-10px); } + 80% { + @include translateX(10px); } + 90% { + @include translateX(-10px); } + 100% { + @include translateX(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(tada) { + 0% { + @include scale(1); } + 10% { + @include transform(scale(0.9) rotate(-3deg)); } + 20% { + @include transform(scale(0.9) rotate(-3deg)); } + 30% { + @include transform(scale(1.1) rotate(3deg)); } + 40% { + @include transform(scale(1.1) rotate(-3deg)); } + 50% { + @include transform(scale(1.1) rotate(3deg)); } + 60% { + @include transform(scale(1.1) rotate(-3deg)); } + 70% { + @include transform(scale(1.1) rotate(3deg)); } + 80% { + @include transform(scale(1.1) rotate(-3deg)); } + 90% { + @include transform(scale(1.1) rotate(3deg)); } + 100% { + @include transform(scale(1) rotate(0)); } } + + +// --------------------------------------------------------------------------- +@include keyframes(swing) { + 20%, 40%, 60%, 80%, 100% { + @include transform-origin(top center); } + 20% { + @include rotate(15deg); } + 40% { + @include rotate(-10deg); } + 60% { + @include rotate(5deg); } + 80% { + @include rotate(-5deg); } + 100% { + @include rotate(0deg); } } + + +// --------------------------------------------------------------------------- +@include keyframes(wobble) { + 0% { + @include translateX(0%); } + 15% { + @include transform(translateX(-25%) rotate(-5deg)); } + 30% { + @include transform(translateX(20%) rotate(3deg)); } + 45% { + @include transform(translateX(-15%) rotate(-3deg)); } + 60% { + @include transform(translateX(10%) rotate(2deg)); } + 75% { + @include transform(translateX(-5%) rotate(-1deg)); } + 100% { + @include transform(translateX(0%)); } } + + +// --------------------------------------------------------------------------- +@include keyframes(pulse) { + 0% { + @include scale(1); } + 50% { + @include scale(1.1); } + 100% { + @include scale(1); } } + + +// --------------------------------------------------------------------------- +@include keyframes(wiggle) { + 0% { + @include skewX(9deg); } + 10% { + @include skewX(-8deg); } + 20% { + @include skewX(7deg); } + 30% { + @include skewX(-6deg); } + 40% { + @include skewX(5deg); } + 50% { + @include skewX(-4deg); } + 60% { + @include skewX(3deg); } + 70% { + @include skewX(-2deg); } + 80% { + @include skewX(1deg); } + 90% { + @include skewX(0deg); } + 100% { + @include skewX(0deg); } } \ No newline at end of file diff --git a/lib/animation/animate/_bouncing.scss b/lib/animation/animate/_bouncing.scss new file mode 100644 index 0000000..ef070bf --- /dev/null +++ b/lib/animation/animate/_bouncing.scss @@ -0,0 +1,3 @@ +// --------------------------------------------------------------------------- +@import "bouncing/bouncing-exits"; +@import "bouncing/bouncing-entrances"; \ No newline at end of file diff --git a/lib/animation/animate/_classes.scss b/lib/animation/animate/_classes.scss new file mode 100644 index 0000000..1cbd8f5 --- /dev/null +++ b/lib/animation/animate/_classes.scss @@ -0,0 +1,21 @@ +// .animated and .animated.hinge classes for external use +.animated { + @include animation(1s ease both); } + +.animated.hinge { + @include animation(2s ease both); } + +// Animations list +$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; + +// Animations that require backface-visibility +$backface: flip, flipInX, flipOutX, flipInY, flipOutY; + +// Creation of the different classes +@each $anim in $animations { + .#{$anim} { + @if index($backface, $anim) { + @include backface-visibility(visible); } + @if $anim == "swing" { + @include transform-origin(top, center); } + @include animation-name($anim); } } diff --git a/lib/animation/animate/_fading.scss b/lib/animation/animate/_fading.scss new file mode 100644 index 0000000..02a4e49 --- /dev/null +++ b/lib/animation/animate/_fading.scss @@ -0,0 +1,3 @@ +// --------------------------------------------------------------------------- +@import "fading/fading-exits"; +@import "fading/fading-entrances"; \ No newline at end of file diff --git a/lib/animation/animate/_flippers.scss b/lib/animation/animate/_flippers.scss new file mode 100644 index 0000000..0880d12 --- /dev/null +++ b/lib/animation/animate/_flippers.scss @@ -0,0 +1,87 @@ +// --------------------------------------------------------------------------- +@include keyframes(flip) { + 0% { + @include transform(perspective(400px) rotateY(0)); + @include animation-timing-function(ease-out); + } + 40% { + @include transform(perspective(400px) translateZ(150px) rotateY(170deg)); + @include animation-timing-function(ease-out); + } + 50% { + @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1)); + @include animation-timing-function(ease-in); + } + 80% { + @include transform(perspective(400px) rotateY(360deg) scale(0.95)); + @include animation-timing-function(ease-in); + } + 100% { + @include transform(perspective(400px) scale(1)); + @include animation-timing-function(ease-in); + } +} + + +// --------------------------------------------------------------------------- +@include keyframes(flipInX) { + 0% { + @include transform(perspective(400px) rotateX(90deg)); + @include opacity(0); + } + 40% { + @include transform(perspective(400px) rotateX(-10deg)); + } + 70% { + @include transform(perspective(400px) rotateX(10deg)); + } + 100% { + @include transform(perspective(400px) rotateX(0deg)); + @include opacity(1); + } +} + + +// --------------------------------------------------------------------------- +@include keyframes(flipOutX) { + 0% { + @include transform(perspective(400px) rotateX(0deg)); + @include opacity(1); + } + 100% { + @include transform(perspective(400px) rotateX(90deg)); + @include opacity(0); + } +} + + +// --------------------------------------------------------------------------- +@include keyframes(flipInY) { + 0% { + @include transform(perspective(400px) rotateY(90deg)); + @include opacity(0); + } + 40% { + @include transform(perspective(400px) rotateY(-10deg)); + } + 70% { + @include transform(perspective(400px) rotateY(10deg)); + } + 100% { + @include transform(perspective(400px) rotateY(0deg)); + @include opacity(1); + } +} + + +// --------------------------------------------------------------------------- +@include keyframes(flipOutY) { + 0% { + @include transform(perspective(400px) rotateY(0deg)); + @include opacity(1); + } + 100% { + @include transform(perspective(400px) rotateY(90deg)); + @include opacity(0); + } +} diff --git a/lib/animation/animate/_lightspeed.scss b/lib/animation/animate/_lightspeed.scss new file mode 100644 index 0000000..0ac139e --- /dev/null +++ b/lib/animation/animate/_lightspeed.scss @@ -0,0 +1,24 @@ +// --------------------------------------------------------------------------- +@include keyframes(lightSpeedIn) { + 0% { + @include transform(translateX(100%) skewX(-30deg)); + @include opacity(0); } + 60% { + @include transform(translateX(-20%) skewX(30deg)); + @include opacity(1); } + 80% { + @include transform(translateX(0%) skewX(-15deg)); + @include opacity(1); } + 100% { + @include transform(translateX(0%) skewX(0deg)); + @include opacity(1); } } + + +// --------------------------------------------------------------------------- +@include keyframes(lightSpeedOut) { + 0% { + @include transform(translateX(0%) skewX(0deg)); + @include opacity(1); } + 100% { + @include transform(translateX(100%) skewX(-30deg)); + @include opacity(0); } } \ No newline at end of file diff --git a/lib/animation/animate/_rotating.scss b/lib/animation/animate/_rotating.scss new file mode 100644 index 0000000..e724575 --- /dev/null +++ b/lib/animation/animate/_rotating.scss @@ -0,0 +1,3 @@ +// --------------------------------------------------------------------------- +@import "rotating/rotating-exits"; +@import "rotating/rotating-entrances"; diff --git a/lib/animation/animate/_specials.scss b/lib/animation/animate/_specials.scss new file mode 100644 index 0000000..9295eb6 --- /dev/null +++ b/lib/animation/animate/_specials.scss @@ -0,0 +1,42 @@ +// --------------------------------------------------------------------------- +@include keyframes(hinge) { + 0% { + @include rotate(0); + @include transform-origin(top left); + @include animation-timing-function(ease-in-out); } + 20%, 60% { + @include rotate(80deg); + @include transform-origin(top left); + @include animation-timing-function(ease-in-out); } + 40% { + @include rotate(60deg); + @include transform-origin(top left); + @include animation-timing-function(ease-in-out); } + 80% { + @include transform(rotate(60deg) translateY(0)); + @include opacity(1); + @include transform-origin(top left); + @include animation-timing-function(ease-in-out); } + 100% { + @include translateY(700px); + @include opacity(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(rollIn) { + 0% { + @include opacity(0); + @include transform(translateX(-100%) rotate(-120deg)); } + 100% { + @include opacity(1); + @include transform(translateX(0px) rotate(0deg)); } } + + +// --------------------------------------------------------------------------- +@include keyframes(rollOut) { + 0% { + @include opacity(1); + @include transform(translateX(0px) rotate(0deg)); } + 100% { + @include opacity(0); + @include transform(translateX(-100%) rotate(-120deg)); } } diff --git a/lib/animation/animate/bouncing/_bouncing-entrances.scss b/lib/animation/animate/bouncing/_bouncing-entrances.scss new file mode 100644 index 0000000..179b978 --- /dev/null +++ b/lib/animation/animate/bouncing/_bouncing-entrances.scss @@ -0,0 +1,68 @@ +// --------------------------------------------------------------------------- +@include keyframes(bounceIn) { + 0% { + opacity: 0; + @include scale(0.3); } + 50% { + opacity: 1; + @include scale(1.05); } + 70% { + @include scale(0.9); } + 100% { + @include scale(1); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceInDown) { + 0% { + opacity: 0; + @include translateY(-2000px); } + 60% { + opacity: 1; + @include translateY(30px); } + 80% { + @include translateY(-10px); } + 100% { + @include translateY(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceInUp) { + 0% { + opacity: 0; + @include translateY(2000px); } + 60% { + opacity: 1; + @include translateY(-30px); } + 80% { + @include translateY(10px); } + 100% { + @include translateY(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceInRight) { + 0% { + opacity: 0; + @include translateX(2000px); } + 60% { + opacity: 1; + @include translateX(-30px); } + 80% { + @include translateX(10px); } + 100% { + @include translateX(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceInLeft) { + 0% { + opacity: 0; + @include translateX(-2000px); } + 60% { + opacity: 1; + @include translateX(30px); } + 80% { + @include translateX(-10px); } + 100% { + @include translateX(0); } } diff --git a/lib/animation/animate/bouncing/_bouncing-exits.scss b/lib/animation/animate/bouncing/_bouncing-exits.scss new file mode 100644 index 0000000..41610e5 --- /dev/null +++ b/lib/animation/animate/bouncing/_bouncing-exits.scss @@ -0,0 +1,60 @@ +// --------------------------------------------------------------------------- +@include keyframes(bounceOut) { + 0% { + @include scale(1); } + 25% { + @include scale(0.95); } + 50% { + opacity: 1; + @include scale(1.1); } + 100% { + opacity: 0; + @include scale(0.3); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceOutUp) { + 0% { + @include translateY(0); } + 20% { + opacity: 1; + @include translateY(20px); } + 100% { + opacity: 0; + @include translateY(-2000px); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceOutDown) { + 0% { + @include translateY(0); } + 20% { + opacity: 1; + @include translateY(-20px); } + 100% { + opacity: 0; + @include translateY(2000px); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceOutLeft) { + 0% { + @include translateX(0); } + 20% { + opacity: 1; + @include translateX(20px); } + 100% { + opacity: 0; + @include translateX(-2000px); } } + + +// --------------------------------------------------------------------------- +@include keyframes(bounceOutRight) { + 0% { + @include translateX(0); } + 20% { + opacity: 1; + @include translateX(-20px); } + 100% { + opacity: 0; + @include translateX(2000px); } } diff --git a/lib/animation/animate/fading/_fading-entrances.scss b/lib/animation/animate/fading/_fading-entrances.scss new file mode 100644 index 0000000..c1c3108 --- /dev/null +++ b/lib/animation/animate/fading/_fading-entrances.scss @@ -0,0 +1,86 @@ +// --------------------------------------------------------------------------- +@include keyframes(fadeIn) { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInUp) { + 0% { + @include translateY(20px); + opacity: 0; } + 100% { + @include translateY(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInDown) { + 0% { + @include translateY(-20px); + opacity: 0; } + 100% { + @include translateY(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInRight) { + 0% { + @include translateX(20px); + opacity: 0; } + 100% { + @include translateX(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInLeft) { + 0% { + @include translateX(-20px); + opacity: 0; } + 100% { + @include translateX(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInUpBig) { + 0% { + @include translateY(2000px); + opacity: 0; } + 100% { + @include translateY(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInDownBig) { + 0% { + opacity: 0; + @include translateY(-2000px); } + 100% { + opacity: 1; + @include translateY(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInRightBig) { + 0% { + opacity: 0; + @include translateX(2000px); } + 100% { + opacity: 1; + @include translateX(0); } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeInLeftBig) { + 0% { + opacity: 0; + @include translateX(-2000px); } + 100% { + opacity: 1; + @include translateX(0); } } diff --git a/lib/animation/animate/fading/_fading-exits.scss b/lib/animation/animate/fading/_fading-exits.scss new file mode 100644 index 0000000..c53b85a --- /dev/null +++ b/lib/animation/animate/fading/_fading-exits.scss @@ -0,0 +1,86 @@ +// --------------------------------------------------------------------------- +@include keyframes(fadeOut) { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutUp) { + 0% { + @include translateY(0); + opacity: 1; } + 100% { + @include translateY(-20px); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutDown) { + 0% { + @include translateY(0); + opacity: 1; } + 100% { + @include translateY(20px); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutRight) { + 0% { + @include translateX(0); + opacity: 1; } + 100% { + @include translateX(20px); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutLeft) { + 0% { + @include translateX(0); + opacity: 1; } + 100% { + @include translateX(-20px); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutUpBig) { + 0% { + @include translateY(0); + opacity: 1; } + 100% { + @include translateY(-2000px); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutDownBig) { + 0% { + opacity: 1; + @include translateY(0); } + 100% { + opacity: 0; + @include translateY(2000px); } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutRightBig) { + 0% { + opacity: 1; + @include translateX(0); } + 100% { + opacity: 0; + @include translateX(2000px); } } + + +// --------------------------------------------------------------------------- +@include keyframes(fadeOutLeftBig) { + 0% { + opacity: 1; + @include translateX(0); } + 100% { + opacity: 0; + @include translateX(-2000px); } } diff --git a/lib/animation/animate/rotating/_rotating-entrances.scss b/lib/animation/animate/rotating/_rotating-entrances.scss new file mode 100644 index 0000000..5a4de38 --- /dev/null +++ b/lib/animation/animate/rotating/_rotating-entrances.scss @@ -0,0 +1,58 @@ +// --------------------------------------------------------------------------- +@include keyframes(rotateIn) { + 0% { + @include transform-origin(center center); + @include rotate(-200deg); + opacity: 0; } + 100% { + @include transform-origin(center center); + @include rotate(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateInDownLeft) { + 0% { + @include transform-origin(left bottom); + @include rotate(-90deg); + opacity: 0; } + 100% { + @include transform-origin(left bottom); + @include rotate(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateInUpLeft) { + 0% { + @include transform-origin(left bottom); + @include rotate(90deg); + opacity: 0; } + 100% { + @include transform-origin(left bottom); + @include rotate(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateInUpRight) { + 0% { + @include transform-origin(right bottom); + @include rotate(-90deg); + opacity: 0; } + 100% { + @include transform-origin(right bottom); + @include rotate(0); + opacity: 1; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateInDownRight) { + 0% { + @include transform-origin(right bottom); + @include rotate(90deg); + opacity: 0; } + 100% { + @include transform-origin(right bottom); + @include rotate(0); + opacity: 1; } } diff --git a/lib/animation/animate/rotating/_rotating-exits.scss b/lib/animation/animate/rotating/_rotating-exits.scss new file mode 100644 index 0000000..6c42f00 --- /dev/null +++ b/lib/animation/animate/rotating/_rotating-exits.scss @@ -0,0 +1,58 @@ +// --------------------------------------------------------------------------- +@include keyframes(rotateOut) { + 0% { + @include transform-origin(center center); + @include rotate(0); + opacity: 1; } + 100% { + @include transform-origin(center center); + @include rotate(200deg); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateOutDownLeft) { + 0% { + @include transform-origin(left bottom); + @include rotate(0); + opacity: 1; } + 100% { + @include transform-origin(left bottom); + @include rotate(90deg); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateOutUpLeft) { + 0% { + @include transform-origin(left bottom); + @include rotate(0); + opacity: 1; } + 100% { + @include transform-origin(left bottom); + @include rotate(-90deg); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateOutDownRight) { + 0% { + @include transform-origin(right bottom); + @include rotate(0); + opacity: 1; } + 100% { + @include transform-origin(right bottom); + @include rotate(-90deg); + opacity: 0; } } + + +// --------------------------------------------------------------------------- +@include keyframes(rotateOutUpRight) { + 0% { + @include transform-origin(right bottom); + @include rotate(0); + opacity: 1; } + 100% { + @include transform-origin(right bottom); + @include rotate(90deg); + opacity: 0; } } diff --git a/lib/compass/_css3.scss b/lib/compass/_css3.scss new file mode 100644 index 0000000..a4aaf73 --- /dev/null +++ b/lib/compass/_css3.scss @@ -0,0 +1,20 @@ +@import "css3/border-radius"; +@import "css3/inline-block"; +@import "css3/opacity"; +@import "css3/box-shadow"; +@import "css3/text-shadow"; +@import "css3/columns"; +@import "css3/box-sizing"; +@import "css3/box"; +@import "css3/images"; +@import "css3/background-clip"; +@import "css3/background-origin"; +@import "css3/background-size"; +@import "css3/font-face"; +@import "css3/transform"; +@import "css3/transition"; +@import "css3/appearance"; +@import "css3/regions"; +@import "css3/hyphenation"; +@import "css3/filter"; +@import "css3/user-interface"; diff --git a/lib/compass/_layout.scss b/lib/compass/_layout.scss new file mode 100644 index 0000000..55bf9ee --- /dev/null +++ b/lib/compass/_layout.scss @@ -0,0 +1,3 @@ +@import "layout/grid-background"; +@import "layout/sticky-footer"; +@import "layout/stretching"; diff --git a/lib/compass/_reset-legacy.scss b/lib/compass/_reset-legacy.scss new file mode 100644 index 0000000..f11f07a --- /dev/null +++ b/lib/compass/_reset-legacy.scss @@ -0,0 +1,3 @@ +@import "reset/utilities-legacy"; + +@include global-reset; diff --git a/lib/compass/_reset.scss b/lib/compass/_reset.scss new file mode 100644 index 0000000..e181dd7 --- /dev/null +++ b/lib/compass/_reset.scss @@ -0,0 +1,3 @@ +@import "reset/utilities"; + +@include global-reset; diff --git a/lib/compass/_support.scss b/lib/compass/_support.scss new file mode 100644 index 0000000..37b6e17 --- /dev/null +++ b/lib/compass/_support.scss @@ -0,0 +1,40 @@ +// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both. +$legacy-support-for-ie: true !default; + +// Setting this to false will result in smaller output, but no support for ie6 hacks +$legacy-support-for-ie6: $legacy-support-for-ie !default; + +// Setting this to false will result in smaller output, but no support for ie7 hacks +$legacy-support-for-ie7: $legacy-support-for-ie !default; + +// Setting this to false will result in smaller output, but no support for legacy ie8 hacks +$legacy-support-for-ie8: $legacy-support-for-ie !default; + +// @private +// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly, +// But in case the user set each of those explicitly, we need to sync the value of +// this combined variable. +$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8; + +// Whether to output legacy support for mozilla. +// Usually this means hacks to support Firefox 3.6 or earlier. +$legacy-support-for-mozilla: true; + +// Support for mozilla in experimental css3 properties (-moz). +$experimental-support-for-mozilla : true !default; +// Support for webkit in experimental css3 properties (-webkit). +$experimental-support-for-webkit : true !default; +// Support for webkit's original (non-standard) gradient syntax. +$support-for-original-webkit-gradients : true !default; +// Support for opera in experimental css3 properties (-o). +$experimental-support-for-opera : true !default; +// Support for microsoft in experimental css3 properties (-ms). +$experimental-support-for-microsoft : true !default; +// Support for khtml in experimental css3 properties (-khtml). +$experimental-support-for-khtml : false !default; +// Support for svg in experimental css3 properties. +// Setting this to true might add significant size to your +// generated stylesheets. +$experimental-support-for-svg : false !default; +// Support for CSS PIE in experimental css3 properties (-pie). +$experimental-support-for-pie : false !default; diff --git a/lib/compass/_typography.scss b/lib/compass/_typography.scss new file mode 100644 index 0000000..4d9cb5d --- /dev/null +++ b/lib/compass/_typography.scss @@ -0,0 +1,4 @@ +@import "typography/links"; +@import "typography/lists"; +@import "typography/text"; +@import "typography/vertical_rhythm"; diff --git a/lib/compass/_utilities.scss b/lib/compass/_utilities.scss new file mode 100644 index 0000000..53a0244 --- /dev/null +++ b/lib/compass/_utilities.scss @@ -0,0 +1,9 @@ +@import "utilities/color"; +@import "utilities/general"; +@import "utilities/sprites"; +@import "utilities/tables"; + +// deprecated +@import "typography/links"; +@import "typography/lists"; +@import "typography/text"; diff --git a/lib/compass/css3/_appearance.scss b/lib/compass/css3/_appearance.scss new file mode 100644 index 0000000..c6e6533 --- /dev/null +++ b/lib/compass/css3/_appearance.scss @@ -0,0 +1,17 @@ +@import "shared"; + +// Change the appearance for Mozilla, Webkit and possibly the future. +// The appearance property is currently not present in any newer CSS specification. +// +// There is no official list of accepted values, but you might check these source: +// +// * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) +// * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) +// (search for 'appearance' within the page) + +@mixin appearance($ap) { + $ap: unquote($ap); + @include experimental(appearance, $ap, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); +} diff --git a/lib/compass/css3/_background-clip.scss b/lib/compass/css3/_background-clip.scss new file mode 100644 index 0000000..6ce473f --- /dev/null +++ b/lib/compass/css3/_background-clip.scss @@ -0,0 +1,43 @@ +@import "shared"; + +// The default value is `padding-box` -- the box model used by modern browsers. +// +// If you wish to do so, you can override the default constant with `border-box` +// +// To override to the default border-box model, use this code: +// $default-background-clip: border-box + +$default-background-clip: padding-box !default; + +// Clip the background (image and color) at the edge of the padding or border. +// +// Legal Values: +// +// * padding-box +// * border-box +// * text + +@mixin background-clip($clip: $default-background-clip) { + // webkit and mozilla use the deprecated short [border | padding] + $clip: unquote($clip); + $deprecated: $clip; + @if $clip == padding-box { $deprecated: padding; } + @if $clip == border-box { $deprecated: border; } + // Support for webkit and mozilla's use of the deprecated short form + @include experimental(background-clip, $deprecated, + -moz, + -webkit, + not -o, + not -ms, + not -khtml, + not official + ); + @include experimental(background-clip, $clip, + not -moz, + not -webkit, + not -o, + not -ms, + -khtml, + official + ); +} diff --git a/lib/compass/css3/_background-origin.scss b/lib/compass/css3/_background-origin.scss new file mode 100644 index 0000000..bc8eaa8 --- /dev/null +++ b/lib/compass/css3/_background-origin.scss @@ -0,0 +1,42 @@ +// Override `$default-background-origin` to change the default. + +@import "shared"; + +$default-background-origin: content-box !default; + +// Position the background off the edge of the padding, border or content +// +// * Possible values: +// * `padding-box` +// * `border-box` +// * `content-box` +// * browser defaults to `padding-box` +// * mixin defaults to `content-box` + + +@mixin background-origin($origin: $default-background-origin) { + $origin: unquote($origin); + // webkit and mozilla use the deprecated short [border | padding | content] + $deprecated: $origin; + @if $origin == padding-box { $deprecated: padding; } + @if $origin == border-box { $deprecated: border; } + @if $origin == content-box { $deprecated: content; } + + // Support for webkit and mozilla's use of the deprecated short form + @include experimental(background-origin, $deprecated, + -moz, + -webkit, + not -o, + not -ms, + not -khtml, + not official + ); + @include experimental(background-origin, $origin, + not -moz, + not -webkit, + -o, + -ms, + -khtml, + official + ); +} diff --git a/lib/compass/css3/_background-size.scss b/lib/compass/css3/_background-size.scss new file mode 100644 index 0000000..9d36447 --- /dev/null +++ b/lib/compass/css3/_background-size.scss @@ -0,0 +1,26 @@ +@import "shared"; + +// override to change the default +$default-background-size: 100% auto !default; + +// Set the size of background images using px, width and height, or percentages. +// Currently supported in: Opera, Gecko, Webkit. +// +// * percentages are relative to the background-origin (default = padding-box) +// * mixin defaults to: `$default-background-size` +@mixin background-size( + $size-1: $default-background-size, + $size-2: false, + $size-3: false, + $size-4: false, + $size-5: false, + $size-6: false, + $size-7: false, + $size-8: false, + $size-9: false, + $size-10: false +) { + $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1); + $sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10); + @include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml); +} diff --git a/lib/compass/css3/_border-radius.scss b/lib/compass/css3/_border-radius.scss new file mode 100644 index 0000000..2da9022 --- /dev/null +++ b/lib/compass/css3/_border-radius.scss @@ -0,0 +1,130 @@ +@import "shared"; + +$default-border-radius: 5px !default; + +// Round all corners by a specific amount, defaults to value of `$default-border-radius`. +// +// When two values are passed, the first is the horizontal radius +// and the second is the vertical radius. +// +// Note: webkit does not support shorthand syntax for several corners at once. +// So in the case where you pass several values only the first will be passed to webkit. +// +// Examples: +// +// .simple { @include border-radius(4px, 4px); } +// .compound { @include border-radius(2px 5px, 3px 6px); } +// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)} +// +// Which generates: +// +// .simple { +// -webkit-border-radius: 4px 4px; +// -moz-border-radius: 4px / 4px; +// -khtml-border-radius: 4px / 4px; +// border-radius: 4px / 4px; } +// +// .compound { +// -webkit-border-radius: 2px 3px; +// -moz-border-radius: 2px 5px / 3px 6px; +// -khtml-border-radius: 2px 5px / 3px 6px; +// border-radius: 2px 5px / 3px 6px; } +// +// .crazy { +// -webkit-border-radius: 1px 2px; +// -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; +// -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; +// border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; } + +@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) { + + @if $vertical-radius { + // Webkit doesn't understand the official shorthand syntax for specifying + // a vertical radius unless so in case there's several we only take the first. + @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius), + not -moz, + -webkit, + not -o, + not -ms, + not -khtml, + not official + ); + @include experimental("border-radius", $radius unquote("/") $vertical-radius, + -moz, + not -webkit, + not -o, + not -ms, + -khtml, + official + ); + } + @else { + @include experimental(border-radius, $radius); + } +} + +// Round radius at position by amount. +// +// * legal values for `$vert`: `top`, `bottom` +// * legal values for `$horz`: `left`, `right` + +@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) { + // Support for mozilla's syntax for specifying a corner + @include experimental("border-radius-#{$vert}#{$horz}", $radius, + -moz, + not -webkit, + not -o, + not -ms, + not -khtml, + not official + ); + @include experimental("border-#{$vert}-#{$horz}-radius", $radius, + not -moz, + -webkit, + not -o, + not -ms, + -khtml, + official + ); + +} + +// Round top-left corner only + +@mixin border-top-left-radius($radius: $default-border-radius) { + @include border-corner-radius(top, left, $radius); } + +// Round top-right corner only + +@mixin border-top-right-radius($radius: $default-border-radius) { + @include border-corner-radius(top, right, $radius); } + +// Round bottom-left corner only + +@mixin border-bottom-left-radius($radius: $default-border-radius) { + @include border-corner-radius(bottom, left, $radius); } + +// Round bottom-right corner only + +@mixin border-bottom-right-radius($radius: $default-border-radius) { + @include border-corner-radius(bottom, right, $radius); } + +// Round both top corners by amount +@mixin border-top-radius($radius: $default-border-radius) { + @include border-top-left-radius($radius); + @include border-top-right-radius($radius); } + +// Round both right corners by amount +@mixin border-right-radius($radius: $default-border-radius) { + @include border-top-right-radius($radius); + @include border-bottom-right-radius($radius); } + +// Round both bottom corners by amount +@mixin border-bottom-radius($radius: $default-border-radius) { + @include border-bottom-left-radius($radius); + @include border-bottom-right-radius($radius); } + +// Round both left corners by amount +@mixin border-left-radius($radius: $default-border-radius) { + @include border-top-left-radius($radius); + @include border-bottom-left-radius($radius); } diff --git a/lib/compass/css3/_box-shadow.scss b/lib/compass/css3/_box-shadow.scss new file mode 100644 index 0000000..ea47dc9 --- /dev/null +++ b/lib/compass/css3/_box-shadow.scss @@ -0,0 +1,76 @@ +// @doc off +// These defaults make the arguments optional for this mixin +// If you like, set different defaults before importing. +// @doc on + +@import "shared"; + + +// The default color for box shadows +$default-box-shadow-color: #333333 !default; + +// The default horizontal offset. Positive is to the right. +$default-box-shadow-h-offset: 0px !default; + +// The default vertical offset. Positive is down. +$default-box-shadow-v-offset: 0px !default; + +// The default blur length. +$default-box-shadow-blur: 5px !default; + +// The default spread length. +$default-box-shadow-spread : false !default; + +// The default shadow inset: inset or false (for standard shadow). +$default-box-shadow-inset : false !default; + +// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box +// shadows are needed. +// Each shadow argument should adhere to the standard css3 syntax for the +// box-shadow property. +@mixin box-shadow( + $shadow-1 : default, + $shadow-2 : false, + $shadow-3 : false, + $shadow-4 : false, + $shadow-5 : false, + $shadow-6 : false, + $shadow-7 : false, + $shadow-8 : false, + $shadow-9 : false, + $shadow-10: false +) { + @if $shadow-1 == default { + $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)); + } + $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10); + @include experimental(box-shadow, $shadow, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); +} + +// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3. +// Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset. +@mixin single-box-shadow( + $color : $default-box-shadow-color, + $hoff : $default-box-shadow-h-offset, + $voff : $default-box-shadow-v-offset, + $blur : $default-box-shadow-blur, + $spread : $default-box-shadow-spread, + $inset : $default-box-shadow-inset +) { + @if not ($inset == true or $inset == false or $inset == inset) { + @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset"; + } + + @if $color == none { + @include box-shadow(none); + } @else { + $full : $hoff $voff; + @if $blur { $full: $full $blur; } + @if $spread { $full: $full $spread; } + @if $color { $full: $full $color; } + @if $inset { $full: inset $full; } + @include box-shadow($full); + } +} diff --git a/lib/compass/css3/_box-sizing.scss b/lib/compass/css3/_box-sizing.scss new file mode 100644 index 0000000..93ff8ac --- /dev/null +++ b/lib/compass/css3/_box-sizing.scss @@ -0,0 +1,13 @@ +@import "shared"; + +// Change the box model for Mozilla, Webkit, IE8 and the future +// +// @param $bs +// [ content-box | border-box ] + +@mixin box-sizing($bs) { + $bs: unquote($bs); + @include experimental(box-sizing, $bs, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); +} diff --git a/lib/compass/css3/_box.scss b/lib/compass/css3/_box.scss new file mode 100644 index 0000000..2abeef3 --- /dev/null +++ b/lib/compass/css3/_box.scss @@ -0,0 +1,111 @@ +@import "shared"; + +// display:box; must be used for any of the other flexbox mixins to work properly +@mixin display-box { + @include experimental-value(display, box, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// Default box orientation, assuming that the user wants something less block-like +$default-box-orient: horizontal !default; + +// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ] +@mixin box-orient( + $orientation: $default-box-orient +) { + $orientation : unquote($orientation); + @include experimental(box-orient, $orientation, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// Default box-align +$default-box-align: stretch !default; + +// Box align [ start | end | center | baseline | stretch ] +@mixin box-align( + $alignment: $default-box-align +) { + $alignment : unquote($alignment); + @include experimental(box-align, $alignment, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// Default box flex +$default-box-flex: 0 !default; + +// mixin which takes an int argument for box flex. Apply this to the children inside the box. +// +// For example: "div.display-box > div.child-box" would get the box flex mixin. +@mixin box-flex( + $flex: $default-box-flex +) { + @include experimental(box-flex, $flex, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// Default flex group +$default-box-flex-group: 1 !default; + +// mixin which takes an int argument for flexible grouping +@mixin box-flex-group( + $group: $default-box-flex-group +) { + @include experimental(box-flex-group, $group, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// default for ordinal group +$default-box-ordinal-group: 1 !default; + +// mixin which takes an int argument for ordinal grouping and rearranging the order +@mixin box-ordinal-group( + $group: $default-box-ordinal-group +) { + @include experimental(box-ordinal-group, $group, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// Box direction default value +$default-box-direction: normal !default; + +// mixin for box-direction [ normal | reverse | inherit ] +@mixin box-direction( + $direction: $default-box-direction +) { + $direction: unquote($direction); + @include experimental(box-direction, $direction, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// default for box lines +$default-box-lines: single !default; + +// mixin for box lines [ single | multiple ] +@mixin box-lines( + $lines: $default-box-lines +) { + $lines: unquote($lines); + @include experimental(box-lines, $lines, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} + +// default for box pack +$default-box-pack: start !default; + +// mixin for box pack [ start | end | center | justify ] +@mixin box-pack( + $pack: $default-box-pack +) { + $pack: unquote($pack); + @include experimental(box-pack, $pack, + -moz, -webkit, not -o, -ms, not -khtml, official + ); +} diff --git a/lib/compass/css3/_columns.scss b/lib/compass/css3/_columns.scss new file mode 100644 index 0000000..dc79517 --- /dev/null +++ b/lib/compass/css3/_columns.scss @@ -0,0 +1,157 @@ +@import "shared"; + +// Specify the shorthand `columns` property. +// +// Example: +// +// @include columns(20em 2) +@mixin columns($width-and-count) { + @include experimental(columns, $width-and-count, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Specify the number of columns +@mixin column-count($count) { + @include experimental(column-count, $count, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Specify the gap between columns e.g. `20px` +@mixin column-gap($width) { + @include experimental(column-gap, $width, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Specify the width of columns e.g. `100px` +@mixin column-width($width) { + @include experimental(column-width, $width, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Specify how many columns an element should span across. +// +// * legal values are 1, all +@mixin column-span($columns) { + @include experimental(column-span, $columns, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Specify the width of the rule between columns e.g. `1px` +@mixin column-rule-width($width) { + @include experimental(column-rule-width, $width, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Specify the style of the rule between columns e.g. `dotted`. +// This works like border-style. +@mixin column-rule-style($style) { + @include experimental(column-rule-style, unquote($style), + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Specify the color of the rule between columns e.g. `blue`. +// This works like border-color. +@mixin column-rule-color($color) { + @include experimental(column-rule-color, $color, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Mixin encompassing all column rule properties +// For example: +// +// @include column-rule(1px, solid, #c00) +// +// Or the values can be space separated: +// +// @include column-rule(1px solid #c00) +@mixin column-rule($width, $style: false, $color: false) { + $full : -compass-space-list(compact($width, $style, $color)); + @include experimental(column-rule, $full, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Mixin for setting column-break-before +// +// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column +// +// Example: +// h2.before {@include column-break-before(always);} +// +// Which generates: +// +// h2.before { +// -webkit-column-break-before: always; +// column-break-before: always;} +@mixin column-break-before($value: auto){ + @include experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official ); +} + +// Mixin for setting column-break-after +// +// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column +// +// Example: +// h2.after {@include column-break-after(always); } +// +// Which generates: +// +// h2.after { +// -webkit-column-break-after: always; +// column-break-after: always; } +@mixin column-break-after($value: auto){ + @include experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official ); +} + +// Mixin for setting column-break-inside +// +// * legal values are auto, avoid, avoid-page, avoid-column +// +// Example: +// h2.inside {@include column-break-inside();} +// Which generates: +// +// h2.inside { +// -webkit-column-break-inside: auto; +// column-break-inside: auto;} +@mixin column-break-inside($value: auto){ + @include experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official ); +} + +// All-purpose mixin for setting column breaks. +// +// * legal values for $type : before, after, inside +// * legal values for '$value' are dependent on $type +// * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column +// * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column +// * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column +// +// Examples: +// h2.before {@include column-break(before, always);} +// h2.after {@include column-break(after, always); } +// h2.inside {@include column-break(inside); } +// +// Which generates: +// h2.before { +// -webkit-column-break-before: always; +// column-break-before: always;} +// +// h2.after { +// -webkit-column-break-after: always; +// column-break-after: always; } +// +// h2.inside { +// -webkit-column-break-inside: auto; +// column-break-inside: auto;} + +@mixin column-break($type: before, $value: auto){ + @include experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official ); +} \ No newline at end of file diff --git a/lib/compass/css3/_filter.scss b/lib/compass/css3/_filter.scss new file mode 100644 index 0000000..cd6eb19 --- /dev/null +++ b/lib/compass/css3/_filter.scss @@ -0,0 +1,23 @@ +@import "shared"; + +// Provides cross-browser support for the upcoming (?) css3 filter property. +// +// Each filter argument should adhere to the standard css3 syntax for the +// filter property. +@mixin filter ( + $filter-1, + $filter-2 : false, + $filter-3 : false, + $filter-4 : false, + $filter-5 : false, + $filter-6 : false, + $filter-7 : false, + $filter-8 : false, + $filter-9 : false, + $filter-10: false +) { + $filter : compact($filter-1, $filter-2, $filter-3, $filter-4, $filter-5, $filter-6, $filter-7, $filter-8, $filter-9, $filter-10); + @include experimental(filter, $filter, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); +} diff --git a/lib/compass/css3/_font-face.scss b/lib/compass/css3/_font-face.scss new file mode 100644 index 0000000..f2a0ecd --- /dev/null +++ b/lib/compass/css3/_font-face.scss @@ -0,0 +1,48 @@ +@import "shared"; + +// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera. +// +// * $name is required, arbitrary, and what you will use in font stacks. +// * $font-files is required using font-files('relative/location', 'format'). +// for best results use this order: woff, opentype/truetype, svg +// * $eot is required by IE, and is a relative location of the eot file. +// * $weight shows if the font is bold, defaults to normal +// * $style defaults to normal, might be also italic +// * For android 2.2 Compatiblity, please ensure that your web page has +// a meta viewport tag. +// * To support iOS < 4.2, an SVG file must be provided +// +// If you need to generate other formats check out the Font Squirrel +// [font generator](http://www.fontsquirrel.com/fontface/generator) +// + +// In order to refer to a specific style of the font in your stylesheets as +// e.g. "font-style: italic;", you may add a couple of @font-face includes +// containing the respective font files for each style and specying +// respective the $style parameter. + +// Order of the includes matters, and it is: normal, bold, italic, bold+italic. + +@mixin font-face( + $name, + $font-files, + $eot: false, + $weight: false, + $style: false +) { + $iefont: unquote("#{$eot}?#iefix"); + @font-face { + font-family: quote($name); + @if $eot { + src: font-url($eot); + $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files; + } + src: $font-files; + @if $weight { + font-weight: $weight; + } + @if $style { + font-style: $style; + } + } +} diff --git a/lib/compass/css3/_hyphenation.scss b/lib/compass/css3/_hyphenation.scss new file mode 100644 index 0000000..a4f5808 --- /dev/null +++ b/lib/compass/css3/_hyphenation.scss @@ -0,0 +1,77 @@ +@import "shared"; + +// Mixins to support specific CSS Text Level 3 elements +// +// +// +// Mixin for word-break properties +// http://www.w3.org/css3-text/#word-break +// * legal values for $type : normal, keep-all, break-all +// +// Example: +// p.wordBreak {@include word-break(break-all);} +// +// Which generates: +// p.wordBreak { +// -ms-word-break: break-all; +// word-break: break-all; +// word-break: break-word;} +// +@mixin word-break($value: normal){ + @if $value == break-all { + //Most browsers handle the break-all case the same... + @include experimental(word-break, $value, + not -moz, not -webkit, not -o, -ms, not -khtml, official + ); + //Webkit handles break-all differently... as break-word + @include experimental(word-break, break-word, + not -moz, not -webkit, not -o, not -ms, not -khtml, official + ); + } + @else { + @include experimental(word-break, $value, + not -moz, not -webkit, not -o, -ms, not -khtml, official + ); + } +} + +// Mixin for the hyphens property +// +// W3C specification: http://www.w3.org/TR/css3-text/#hyphens +// * legal values for $type : auto, manual, none +// +// Example: +// p { +// @include hyphens(auto);} +// Which generates: +// p { +// -moz-hyphens: auto; +// -webkit-hyphens: auto; +// hyphens: auto;} +// +@mixin hyphens($value: auto){ + @include experimental(hyphens, $value, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); +} + +// Mixin for x-browser hyphenation based on @auchenberg's post: +// Removes the need for the HTML tag +// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ +// +// Example: +// div {@include hyphenation;} +// +// Which generates: +// div { +// -ms-word-break: break-all; +// word-break: break-all; +// word-break: break-word; +// -moz-hyphens: auto; +// -webkit-hyphens: auto; +// hyphens: auto;} +// +@mixin hyphenation{ + @include word-break(break-all); + @include hyphens; +} diff --git a/lib/compass/css3/_images.scss b/lib/compass/css3/_images.scss new file mode 100644 index 0000000..18cdc16 --- /dev/null +++ b/lib/compass/css3/_images.scss @@ -0,0 +1,132 @@ +@import "shared"; +@import "../utilities/general/hacks"; + +// Background property support for vendor prefixing within values. +@mixin background( + $background-1, + $background-2: false, + $background-3: false, + $background-4: false, + $background-5: false, + $background-6: false, + $background-7: false, + $background-8: false, + $background-9: false, + $background-10: false +) { + $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, + $background-6, $background-7, $background-8, $background-9, $background-10); + $mult-bgs: -compass-list-size($backgrounds) > 1; + $add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs; + @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); } + @if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) { background: -owg($backgrounds); } + @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); } + @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); } + @if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); } + @if $experimental-support-for-pie and $add-pie-bg { -pie-background: -pie($backgrounds); } + background: $backgrounds ; +} + +@mixin background-with-css2-fallback( + $background-1, + $background-2: false, + $background-3: false, + $background-4: false, + $background-5: false, + $background-6: false, + $background-7: false, + $background-8: false, + $background-9: false, + $background-10: false +) { + $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, + $background-6, $background-7, $background-8, $background-9, $background-10); + $mult-bgs: -compass-list-size($backgrounds) > 1; + $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false); + @if not blank($simple-background) { background: $simple-background; } + @include background($background-1, $background-2, $background-3, $background-4, $background-5, + $background-6, $background-7, $background-8, $background-9, $background-10); +} + + +// Background image property support for vendor prefixing within values. +@mixin background-image( + $image-1, + $image-2: false, + $image-3: false, + $image-4: false, + $image-5: false, + $image-6: false, + $image-7: false, + $image-8: false, + $image-9: false, + $image-10: false +) { + $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10); + $add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1; + + @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; } + @if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); } + @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); } + @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); } + @if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); } + @if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." } + background-image: $images ; +} + +// Emit a IE-Specific filters that renders a simple linear gradient. +// For use in IE 6 - 8. Best practice would have you apply this via a +// conditional IE stylesheet, but if you must, you should place this before +// any background-image properties that you have specified. +// +// For the `$orientation` parameter, you can pass `vertical` or `horizontal`. +@mixin filter-gradient($start-color, $end-color, $orientation: vertical) { + @include has-layout; + $gradient-type: if($orientation == vertical, 0, 1); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 { + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}'); + } +} + + +// Border image property support for vendor prefixing properties and values. +@mixin border-image($value) { + @if $experimental-support-for-mozilla { -moz-border-image: -moz(reject(-compass-list($value), fill)); } + @if $support-for-original-webkit-gradients { -webkit-border-image: -owg(reject(-compass-list($value), fill)); } + @if $experimental-support-for-webkit { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); } + @if $experimental-support-for-opera { -o-border-image: -o(reject(-compass-list($value), fill)); } + @if $experimental-support-for-svg { border-image: -svg(reject(-compass-list($value), fill)); } + border-image: $value; +} + +// List style image property support for vendor prefixing within values. +@mixin list-style-image($image) { + @if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); } + @if $support-for-original-webkit-gradients and prefixed(-owg, $image) { list-style-image: -owg($image); } + @if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); } + @if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); } + @if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); } + list-style-image: $image ; +} + +// List style property support for vendor prefixing within values. +@mixin list-style($value) { + $value: -compass-list($value); + @if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); } + @if $support-for-original-webkit-gradients and prefixed(-owg, $value) { list-style-image: -owg($value); } + @if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); } + @if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); } + @if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); } + list-style-image: $value ; +} + +// content property support for vendor prefixing within values. +@mixin content($value) { + $value: -compass-list($value); + @if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); } + @if $support-for-original-webkit-gradients and prefixed(-owg, $value) { content: -owg($value); } + @if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); } + @if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); } + @if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); } + content: $value ; +} diff --git a/lib/compass/css3/_inline-block.scss b/lib/compass/css3/_inline-block.scss new file mode 100644 index 0000000..75519b1 --- /dev/null +++ b/lib/compass/css3/_inline-block.scss @@ -0,0 +1,22 @@ +@import "shared"; + +// Set `$inline-block-alignment` to `none` or `false` to disable the output +// of a vertical-align property in the inline-block mixin. +// Or set it to a legal value for `vertical-align` to change the default. +$inline-block-alignment: middle !default; + +// Provides a cross-browser method to implement `display: inline-block;` +@mixin inline-block($alignment: $inline-block-alignment) { + @if $legacy-support-for-mozilla { + display: -moz-inline-stack; + } + display: inline-block; + @if $alignment and $alignment != none { + vertical-align: $alignment; + } + @if $legacy-support-for-ie { + *vertical-align: auto; + zoom: 1; + *display: inline; + } +} diff --git a/lib/compass/css3/_opacity.scss b/lib/compass/css3/_opacity.scss new file mode 100644 index 0000000..fc497ff --- /dev/null +++ b/lib/compass/css3/_opacity.scss @@ -0,0 +1,19 @@ +@import "shared"; + +// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity. +// +// @param $opacity +// A number between 0 and 1, where 0 is transparent and 1 is opaque. + +@mixin opacity($opacity) { + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 { + filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})"); + } + opacity: $opacity; +} + +// Make an element completely transparent. +@mixin transparent { @include opacity(0); } + +// Make an element completely opaque. +@mixin opaque { @include opacity(1); } diff --git a/lib/compass/css3/_pie.scss b/lib/compass/css3/_pie.scss new file mode 100644 index 0000000..81e2e51 --- /dev/null +++ b/lib/compass/css3/_pie.scss @@ -0,0 +1,73 @@ +$experimental-support-for-pie: true; + +// It is recommended that you use Sass's @extend directive to apply the behavior +// to your PIE elements. To assist you, Compass provides this variable. +// When set, it will cause the `@include pie` mixin to extend this class. +// The class name you provide should **not** include the `.`. +$pie-base-class: false !default; + +// The default approach to using PIE. +// Can be one of: +// +// * relative (default) +// * z-index +// * none +$pie-default-approach: relative !default; + +// The location of your PIE behavior file +// This should be root-relative to your web server +// relative assets don't work. It is recommended that +// you set this yourself. +$pie-behavior: stylesheet-url("PIE.htc") !default; + +// When using the z-index approach, the +// first ancestor of the PIE element at +// or before the container's opaque background +// should have a z-index set as well to ensure +// propert z-index stacking. +// +// The `$position` argument must be some non-static +// value (absolute, relative, etc.) +@mixin pie-container($z-index: 0, $position: relative) { + z-index: $z-index; + position: $position; +} + +// PIE elements must have this behavior attached to them. +// IE is broken -- it doesn't think of behavior urls as +// relative to the stylesheet. It considers them relative +// to the webpage. As a result, you cannot reliably use +// compass's relative_assets with PIE. +// +// * `$approach` - one of: relative, z-index, or none +// * `$z-index` - when using the z-index approach, this +// is the z-index that is applied. +@mixin pie-element( + $approach: $pie-default-approach, + $z-index: 0 +) { + behavior: $pie-behavior; + @if $approach == relative { + position: relative; + } + @else if $approach == z-index { + z-index: $z-index; + } +} + +// a smart mixin that knows to extend or include pie-element according +// to your stylesheet's configuration variables. +@mixin pie($base-class: $pie-base-class) { + @if $base-class { + @extend .#{$base-class}; + } + @else { + @include pie-element; + } +} + +// Watch `$n` levels of ancestors for changes to their class attribute +// So that cascading styles will work correctly on the PIE element. +@mixin pie-watch-ancestors($n) { + -pie-watch-ancestors: $n; +} \ No newline at end of file diff --git a/lib/compass/css3/_regions.scss b/lib/compass/css3/_regions.scss new file mode 100644 index 0000000..9b2f27c --- /dev/null +++ b/lib/compass/css3/_regions.scss @@ -0,0 +1,22 @@ +@import "shared"; + +// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/) +// +// $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. +// +// For a visual explanation, see the diagrams at Chris Coyier's +// [CSS-Tricks](http://css-tricks.com/content-folding/) + +@mixin flow-into($target) { + $target: unquote($target); + @include experimental(flow-into, $target, + not -moz, -webkit, not -o, -ms, not -khtml, not official + ); +} + +@mixin flow-from($target) { + $target: unquote($target); + @include experimental(flow-from, $target, + not -moz, -webkit, not -o, -ms, not -khtml, not official + ); +} \ No newline at end of file diff --git a/lib/compass/css3/_shared.scss b/lib/compass/css3/_shared.scss new file mode 100644 index 0000000..784ab21 --- /dev/null +++ b/lib/compass/css3/_shared.scss @@ -0,0 +1,38 @@ +@import "../support"; + +// This mixin provides basic support for CSS3 properties and +// their corresponding experimental CSS2 properties when +// the implementations are identical except for the property +// prefix. +@mixin experimental($property, $value, + $moz : $experimental-support-for-mozilla, + $webkit : $experimental-support-for-webkit, + $o : $experimental-support-for-opera, + $ms : $experimental-support-for-microsoft, + $khtml : $experimental-support-for-khtml, + $official : true +) { + @if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; } + @if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; } + @if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; } + @if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; } + @if $o and $experimental-support-for-opera { -o-#{$property} : $value; } + @if $official { #{$property} : $value; } +} + +// Same as experimental(), but for cases when the property is the same and the value is vendorized +@mixin experimental-value($property, $value, + $moz : $experimental-support-for-mozilla, + $webkit : $experimental-support-for-webkit, + $o : $experimental-support-for-opera, + $ms : $experimental-support-for-microsoft, + $khtml : $experimental-support-for-khtml, + $official : true +) { + @if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; } + @if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; } + @if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; } + @if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; } + @if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; } + @if $official { #{$property} : #{$value}; } +} diff --git a/lib/compass/css3/_text-shadow.scss b/lib/compass/css3/_text-shadow.scss new file mode 100644 index 0000000..eab7636 --- /dev/null +++ b/lib/compass/css3/_text-shadow.scss @@ -0,0 +1,87 @@ +@import "shared"; + +// These defaults make the arguments optional for this mixin +// If you like, set different defaults in your project + +$default-text-shadow-color: #aaa !default; +$default-text-shadow-h-offset: 0px !default; +$default-text-shadow-v-offset: 0px !default; +$default-text-shadow-blur: 1px !default; +$default-text-shadow-spread: false !default; + +// Provides cross-browser text shadows when one or more shadows are needed. +// Each shadow argument should adhere to the standard css3 syntax for the +// text-shadow property. +// +// Note: if any shadow has a spread parameter, this will cause the mixin +// to emit the shadow declaration twice, first without the spread, +// then with the spread included. This allows you to progressively +// enhance the browsers that do support the spread parameter. +@mixin text-shadow( + $shadow-1 : default, + $shadow-2 : false, + $shadow-3 : false, + $shadow-4 : false, + $shadow-5 : false, + $shadow-6 : false, + $shadow-7 : false, + $shadow-8 : false, + $shadow-9 : false, + $shadow-10: false +) { + @if $shadow-1 == default { + $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); + } + $shadows-without-spread: join((),(),comma); + $shadows: join((),(),comma); + $has-spread: false; + @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, + $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) { + @if length($shadow) > 4 { + $has-spread: true; + $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5)); + $shadows: append($shadows, $shadow); + } else { + $shadows-without-spread: append($shadows-without-spread, $shadow); + $shadows: append($shadows, $shadow); + } + } + @if $has-spread { + text-shadow: $shadows-without-spread; + } + text-shadow: $shadows; +} + +// Provides a single cross-browser CSS text shadow. +// +// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread +// according to the configuration defaults above. +@mixin single-text-shadow( + $hoff: false, + $voff: false, + $blur: false, + $spread: false, + $color: false +) { + // A lot of people think the color comes first. It doesn't. + @if type-of($hoff) == color { + $temp-color: $hoff; + $hoff: $voff; + $voff: $blur; + $blur: $spread; + $spread: $color; + $color: $temp-color; + } + // Can't rely on default assignment with multiple supported argument orders. + $hoff: if($hoff, $hoff, $default-text-shadow-h-offset); + $voff: if($voff, $voff, $default-text-shadow-v-offset); + $blur: if($blur, $blur, $default-text-shadow-blur ); + $spread: if($spread, $spread, $default-text-shadow-spread ); + $color: if($color, $color, $default-text-shadow-color ); + // We don't need experimental support for this property. + @if $color == none or $hoff == none { + @include text-shadow(none); + } @else { + @include text-shadow(compact($hoff $voff $blur $spread $color)); + } +} diff --git a/lib/compass/css3/_transform-legacy.scss b/lib/compass/css3/_transform-legacy.scss new file mode 100644 index 0000000..ac661da --- /dev/null +++ b/lib/compass/css3/_transform-legacy.scss @@ -0,0 +1,87 @@ +@import "shared"; + +@warn "This version of the transform module has been deprecated and will be removed."; + +// CSS Transform and Transform-Origin + +// Apply a transform sent as a complete string. + +@mixin apply-transform($transform) { + @include experimental(transform, $transform, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} + +// Apply a transform-origin sent as a complete string. + +@mixin apply-origin($origin) { + @include experimental(transform-origin, $origin, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} + +// transform-origin requires x and y coordinates +// +// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely + +@mixin transform-origin($originx: 50%, $originy: 50%) { + @if $originx or $originy { + @if $originy { + @include apply-origin($originx or 50% $originy); + } @else { + @include apply-origin($originx); + } + } +} + +// A full transform mixin with everything you could want +// +// * including origin adjustments if you want them +// * scale, rotate and skew require units of degrees(deg) +// * scale takes a multiplier, rotate and skew take degrees + +@mixin transform( + $scale: 1, + $rotate: 0deg, + $transx: 0, + $transy: 0, + $skewx: 0deg, + $skewy: 0deg, + $originx: false, + $originy: false +) { + $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy); + @include apply-transform($transform); + @include transform-origin($originx, $originy); +} + +// Transform Partials +// +// These work well on their own, but they don't add to each other, they override. +// Use them with extra origin args, or along side +transform-origin + +// Adjust only the scale, with optional origin coordinates + +@mixin scale($scale: 1.25, $originx: false, $originy: false) { + @include apply-transform(scale($scale)); + @include transform-origin($originx, $originy); +} + +// Adjust only the rotation, with optional origin coordinates + +@mixin rotate($rotate: 45deg, $originx: false, $originy: false) { + @include apply-transform(rotate($rotate)); + @include transform-origin($originx, $originy); +} + +// Adjust only the translation + +@mixin translate($transx: 0, $transy: 0) { + @include apply-transform(translate($transx, $transy)); +} + +// Adjust only the skew, with optional origin coordinates +@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) { + @include apply-transform(skew($skewx, $skewy)); + @include transform-origin($originx, $originy); +} diff --git a/lib/compass/css3/_transform.scss b/lib/compass/css3/_transform.scss new file mode 100644 index 0000000..ecd50b7 --- /dev/null +++ b/lib/compass/css3/_transform.scss @@ -0,0 +1,598 @@ +@import "shared"; + +// @doc off +// Note ---------------------------------------------------------------------- +// Safari, Chrome, and Firefox all support 3D transforms. However, +// only in the most recent builds. You should also provide fallback 2d support for +// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased. +// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d) +// to switch between the two support lists. The toggle defaults to 'false' (2D), +// and also accepts 'true' (3D). Currently the lists are as follows: +// 2D: Mozilla, Webkit, Opera, Official +// 3D: Webkit, Firefox. + +// Available Transforms ------------------------------------------------------ +// - Scale (2d and 3d) +// - Rotate (2d and 3d) +// - Translate (2d and 3d) +// - Skew (2d only) + +// Transform Parameters ------------------------------------------------------ +// - Transform Origin (2d and 3d) +// - Perspective (3d) +// - Perspective Origin (3d) +// - Transform Style (3d) +// - Backface Visibility (3d) + +// Mixins -------------------------------------------------------------------- +// transform-origin +// - shortcuts: transform-origin2d, transform-origin3d +// - helpers: apply-origin +// transform +// - shortcuts: transform2d, transform3d +// - helpers: simple-transform, create-transform +// perspective +// - helpers: perspective-origin +// transform-style +// backface-visibility +// scale +// - shortcuts: scaleX, scaleY, scaleZ, scale3d +// rotate +// - shortcuts: rotateX, rotateY, rotate3d +// translate +// - shortcuts: translateX, translateY, translateZ, translate3d +// skew +// - shortcuts: skewX, skewY + +// Defaults ------------------------------------------------------------------ +// @doc on + +// The default x-origin for transforms +$default-origin-x : 50% !default; +// The default y-origin for transforms +$default-origin-y : 50% !default; +// The default z-origin for transforms +$default-origin-z : 50% !default; + + +// The default x-multiplier for scaling +$default-scale-x : 1.25 !default; +// The default y-multiplier for scaling +$default-scale-y : $default-scale-x !default; +// The default z-multiplier for scaling +$default-scale-z : $default-scale-x !default; + + +// The default angle for rotations +$default-rotate : 45deg !default; + + +// The default x-vector for the axis of 3d rotations +$default-vector-x : 1 !default; +// The default y-vector for the axis of 3d rotations +$default-vector-y : 1 !default; +// The default z-vector for the axis of 3d rotations +$default-vector-z : 1 !default; + + +// The default x-length for translations +$default-translate-x : 1em !default; +// The default y-length for translations +$default-translate-y : $default-translate-x !default; +// The default z-length for translations +$default-translate-z : $default-translate-x !default; + + +// The default x-angle for skewing +$default-skew-x : 5deg !default; +// The default y-angle for skewing +$default-skew-y : 5deg !default; + + +// **Transform-origin** +// Transform-origin sent as a complete string +// +// @include apply-origin( origin [, 3D-only ] ) +// +// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates +// in percentages, absolute (px, cm, in, em etc..) or relative +// (left, top, right, bottom, center) units +// +// @param only3d Set this to true to only apply this +// mixin where browsers have 3D support. +@mixin apply-origin($origin, $only3d) { + $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2; + @if $only3d { + @include experimental(transform-origin, $origin, + -moz, -webkit, -o, -ms, not -khtml, official + ); + } @else { + @include experimental(transform-origin, $origin, + -moz, -webkit, -o, -ms, not -khtml, official + ); + } +} + +// Transform-origin sent as individual arguments: +// +// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] ) +// +// where the 3 'origin-' arguments represent x/y/z coordinates. +// +// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support +@mixin transform-origin( + $origin-x: $default-origin-x, + $origin-y: $default-origin-y, + $origin-z: false, + $only3d: if($origin-z, true, false) +) { + $origin: unquote(''); + @if $origin-x or $origin-y or $origin-z { + @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; } + @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }} + @if $origin-z { $origin: $origin $origin-z; } + @include apply-origin($origin, $only3d); + } +} + + +// Transform sent as a complete string: +// +// @include transform( transforms [, 3D-only ] ) +// +// where 'transforms' is a space separated list of all the transforms to be applied. +@mixin transform( + $transform, + $only3d: false +) { + @if $only3d { + @include experimental(transform, $transform, + -moz, -webkit, -o, -ms, not -khtml, official + ); + } @else { + @include experimental(transform, $transform, + -moz, -webkit, -o, -ms, not -khtml, official + ); + } +} + +// Shortcut to target all browsers with 2D transform support +@mixin transform2d($trans) { + @include transform($trans, false); +} + +// Shortcut to target only browsers with 3D transform support +@mixin transform3d($trans) { + @include transform($trans, true); +} + +// @doc off +// 3D Parameters ------------------------------------------------------------- +// @doc on + +// Set the perspective of 3D transforms on the children of an element: +// +// @include perspective( perspective ) +// +// where 'perspective' is a unitless number representing the depth of the +// z-axis. The higher the perspective, the more exaggerated the foreshortening. +// values from 500 to 1000 are more-or-less "normal" - a good starting-point. +@mixin perspective($p) { + @include experimental(perspective, $p, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Set the origin position for the perspective +// +// @include perspective-origin(origin-x [origin-y]) +// +// where the two arguments represent x/y coordinates +@mixin perspective-origin($origin: 50%) { + @include experimental(perspective-origin, $origin, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Determine whether a 3D objects children also live in the given 3D space +// +// @include transform-style( [ style ] ) +// +// where `style` can be either `flat` or `preserve-3d`. +// Browsers default to `flat`, mixin defaults to `preserve-3d`. +@mixin transform-style($style: preserve-3d) { + @include experimental(transform-style, $style, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// Determine the visibility of an element when it's back is turned +// +// @include backface-visibility( [ visibility ] ) +// +// where `visibility` can be either `visible` or `hidden`. +// Browsers default to visible, mixin defaults to hidden +@mixin backface-visibility($visibility: hidden) { + @include experimental(backface-visibility, $visibility, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + +// @doc off +// Transform Partials -------------------------------------------------------- +// These work well on their own, but they don't add to each other, they override. +// Use along with transform parameter mixins to adjust origin, perspective and style +// --------------------------------------------------------------------------- + + +// Scale --------------------------------------------------------------------- +// @doc on + +// Scale an object along the x and y axis: +// +// @include scale( [ scale-x, scale-y, perspective, 3D-only ] ) +// +// where the 'scale-' arguments are unitless multipliers of the x and y dimensions +// and perspective, which works the same as the stand-alone perspective property/mixin +// but applies to the individual element (multiplied with any parent perspective) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin scale( + $scale-x: $default-scale-x, + $scale-y: $scale-x, + $perspective: false, + $only3d: false +) { + $trans: scale($scale-x, $scale-y); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform($trans, $only3d); +} + +// Scale an object along the x axis +// @include scaleX( [ scale-x, perspective, 3D-only ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin scaleX( + $scale: $default-scale-x, + $perspective: false, + $only3d: false +) { + $trans: scaleX($scale); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform($trans, $only3d); +} + +// Scale an object along the y axis +// @include scaleY( [ scale-y, perspective, 3D-only ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin scaleY( + $scale: $default-scale-y, + $perspective: false, + $only3d: false +) { + $trans: scaleY($scale); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform($trans, $only3d); +} + +// Scale an object along the z axis +// @include scaleZ( [ scale-z, perspective ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin scaleZ( + $scale: $default-scale-z, + $perspective: false +) { + $trans: scaleZ($scale); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform3d($trans); +} + +// Scale and object along all three axis +// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin scale3d( + $scale-x: $default-scale-x, + $scale-y: $default-scale-y, + $scale-z: $default-scale-z, + $perspective: false +) { + $trans: scale3d($scale-x, $scale-y, $scale-z); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform3d($trans); +} + +// @doc off +// Rotate -------------------------------------------------------------------- +// @doc on + +// Rotate an object around the z axis (2D) +// @include rotate( [ rotation, perspective, 3D-only ] ) +// where 'rotation' is an angle set in degrees (deg) or radian (rad) units +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin rotate( + $rotate: $default-rotate, + $perspective: false, + $only3d: false +) { + $trans: rotate($rotate); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform($trans, $only3d); +} + +// A longcut for 'rotate' in case you forget that 'z' is implied +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin rotateZ( + $rotate: $default-rotate, + $perspective: false, + $only3d: false +) { + @include rotate($rotate, $perspective, $only3d); +} + +// Rotate an object around the x axis (3D) +// @include rotateX( [ rotation, perspective ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin rotateX( + $rotate: $default-rotate, + $perspective: false +) { + $trans: rotateX($rotate); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform3d($trans); +} + +// Rotate an object around the y axis (3D) +// @include rotate( [ rotation, perspective ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin rotateY( + $rotate: $default-rotate, + $perspective: false +) { + $trans: rotateY($rotate); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform3d($trans); +} + +// Rotate an object around an arbitrary axis (3D) +// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] ) +// where the 'vector-' arguments accept unitless numbers. +// These numbers are not important on their own, but in relation to one another +// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz. +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin rotate3d( + $vector-x: $default-vector-x, + $vector-y: $default-vector-y, + $vector-z: $default-vector-z, + $rotate: $default-rotate, + $perspective: false +) { + $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform3d($trans); +} + +// @doc off +// Translate ----------------------------------------------------------------- +// @doc on + +// Move an object along the x or y axis (2D) +// @include translate( [ translate-x, translate-y, perspective, 3D-only ] ) +// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units. +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin translate( + $translate-x: $default-translate-x, + $translate-y: $default-translate-y, + $perspective: false, + $only3d: false +) { + $trans: translate($translate-x, $translate-y); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform($trans, $only3d); +} + +// Move an object along the x axis (2D) +// @include translate( [ translate-x, perspective, 3D-only ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin translateX( + $trans-x: $default-translate-x, + $perspective: false, + $only3d: false +) { + $trans: translateX($trans-x); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform($trans, $only3d); +} + +// Move an object along the y axis (2D) +// @include translate( [ translate-y, perspective, 3D-only ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin translateY( + $trans-y: $default-translate-y, + $perspective: false, + $only3d: false +) { + $trans: translateY($trans-y); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform($trans, $only3d); +} + +// Move an object along the z axis (3D) +// @include translate( [ translate-z, perspective ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin translateZ( + $trans-z: $default-translate-z, + $perspective: false +) { + $trans: translateZ($trans-z); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform3d($trans); +} + +// Move an object along the x, y and z axis (3D) +// @include translate( [ translate-x, translate-y, translate-z, perspective ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin translate3d( + $translate-x: $default-translate-x, + $translate-y: $default-translate-y, + $translate-z: $default-translate-z, + $perspective: false +) { + $trans: translate3d($translate-x, $translate-y, $translate-z); + @if $perspective { $trans: perspective($perspective) $trans; } + @include transform3d($trans); +} + +// @doc off +// Skew ---------------------------------------------------------------------- +// @doc on + +// Skew an element: +// +// @include skew( [ skew-x, skew-y, 3D-only ] ) +// +// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units. +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin skew( + $skew-x: $default-skew-x, + $skew-y: $default-skew-y, + $only3d: false +) { + $trans: skew($skew-x, $skew-y); + @include transform($trans, $only3d); +} + +// Skew an element along the x axiz +// +// @include skew( [ skew-x, 3D-only ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin skewX( + $skew-x: $default-skew-x, + $only3d: false +) { + $trans: skewX($skew-x); + @include transform($trans, $only3d); +} + +// Skew an element along the y axis +// +// @include skew( [ skew-y, 3D-only ] ) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin skewY( + $skew-y: $default-skew-y, + $only3d: false +) { + $trans: skewY($skew-y); + @include transform($trans, $only3d); +} + + +// Full transform mixins +// For settings any combination of transforms as arguments +// These are complex and not highly recommended for daily use. They are mainly +// here for backward-compatibility purposes. +// +// * they include origin adjustments +// * scale takes a multiplier (unitless), rotate and skew take degrees (deg) +// +// **Note** This mixin cannot be combined with other transform mixins. +@mixin create-transform( + $perspective: false, + $scale-x: false, + $scale-y: false, + $scale-z: false, + $rotate-x: false, + $rotate-y: false, + $rotate-z: false, + $rotate3d: false, + $trans-x: false, + $trans-y: false, + $trans-z: false, + $skew-x: false, + $skew-y: false, + $origin-x: false, + $origin-y: false, + $origin-z: false, + $only3d: false +) { + $trans: unquote(""); + + // perspective + @if $perspective { $trans: perspective($perspective) ; } + + // scale + @if $scale-x and $scale-y { + @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); } + @else { $trans: $trans scale($scale-x, $scale-y); } + } @else { + @if $scale-x { $trans: $trans scaleX($scale-x); } + @if $scale-y { $trans: $trans scaleY($scale-y); } + @if $scale-z { $trans: $trans scaleZ($scale-z); } + } + + // rotate + @if $rotate-x { $trans: $trans rotateX($rotate-x); } + @if $rotate-y { $trans: $trans rotateY($rotate-y); } + @if $rotate-z { $trans: $trans rotateZ($rotate-z); } + @if $rotate3d { $trans: $trans rotate3d($rotate3d); } + + // translate + @if $trans-x and $trans-y { + @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); } + @else { $trans: $trans translate($trans-x, $trans-y); } + } @else { + @if $trans-x { $trans: $trans translateX($trans-x); } + @if $trans-y { $trans: $trans translateY($trans-y); } + @if $trans-z { $trans: $trans translateZ($trans-z); } + } + + // skew + @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); } + @else { + @if $skew-x { $trans: $trans skewX($skew-x); } + @if $skew-y { $trans: $trans skewY($skew-y); } + } + + // apply it! + @include transform($trans, $only3d); + @include transform-origin($origin-x, $origin-y, $origin-z, $only3d); +} + + +// A simplified set of options +// backwards-compatible with the previous version of the 'transform' mixin +@mixin simple-transform( + $scale: false, + $rotate: false, + $trans-x: false, + $trans-y: false, + $skew-x: false, + $skew-y: false, + $origin-x: false, + $origin-y: false +) { + @include create-transform( + false, + $scale, $scale, false, + false, false, $rotate, false, + $trans-x, $trans-y, false, + $skew-x, $skew-y, + $origin-x, $origin-y, false, + false + ); +} diff --git a/lib/compass/css3/_transition.scss b/lib/compass/css3/_transition.scss new file mode 100644 index 0000000..4c4cb8c --- /dev/null +++ b/lib/compass/css3/_transition.scss @@ -0,0 +1,221 @@ +@import "shared"; + +// CSS Transitions +// Currently only works in Webkit. +// +// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3 +// * We'll be prepared. +// +// Including this submodule sets following defaults for the mixins: +// +// $default-transition-property : all +// $default-transition-duration : 1s +// $default-transition-function : false +// $default-transition-delay : false +// +// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s). + +$default-transition-property: all !default; + +$default-transition-duration: 1s !default; + +$default-transition-function: false !default; + +$default-transition-delay: false !default; + +$transitionable-prefixed-values: transform, transform-origin !default; + +// One or more properties to transition +// +// * for multiple, use a comma-delimited list +// * also accepts "all" or "none" + +@mixin transition-property($property-1: $default-transition-property, + $property-2 : false, + $property-3 : false, + $property-4 : false, + $property-5 : false, + $property-6 : false, + $property-7 : false, + $property-8 : false, + $property-9 : false, + $property-10: false +) { + @if type-of($property-1) == string { $property-1: unquote($property-1); } + $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10); + @if $experimental-support-for-webkit { -webkit-transition-property : prefixed-for-transition(-webkit, $properties); } + @if $experimental-support-for-mozilla { -moz-transition-property : prefixed-for-transition(-moz, $properties); } + @if $experimental-support-for-opera { -o-transition-property : prefixed-for-transition(-o, $properties); } + transition-property : $properties; +} + +// One or more durations in seconds +// +// * for multiple, use a comma-delimited list +// * these durations will affect the properties in the same list position + +@mixin transition-duration($duration-1: $default-transition-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 +) { + @if type-of($duration-1) == string { $duration-1: unquote($duration-1); } + $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10); + @include experimental(transition-duration, $durations, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} + +// One or more timing functions +// +// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)] +// * For multiple, use a comma-delimited list +// * These functions will effect the properties in the same list position + +@mixin transition-timing-function($function-1: $default-transition-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 +) { + $function-1: unquote($function-1); + $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10); + @include experimental(transition-timing-function, $functions, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} + +// One or more transition-delays in seconds +// +// * for multiple, use a comma-delimited list +// * these delays will effect the properties in the same list position + +@mixin transition-delay($delay-1: $default-transition-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 +) { + @if type-of($delay-1) == string { $delay-1: unquote($delay-1); } + $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10); + @include experimental(transition-delay, $delays, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} + +// Transition all-in-one shorthand + +@mixin single-transition( + $property: $default-transition-property, + $duration: $default-transition-duration, + $function: $default-transition-function, + $delay: $default-transition-delay +) { + @include transition(compact($property $duration $function $delay)); +} + +@mixin transition( + $transition-1 : default, + $transition-2 : false, + $transition-3 : false, + $transition-4 : false, + $transition-5 : false, + $transition-6 : false, + $transition-7 : false, + $transition-8 : false, + $transition-9 : false, + $transition-10: false +) { + @if $transition-1 == default { + $transition-1 : compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay); + } + $transitions: false; + @if type-of($transition-1) == list and type-of(nth($transition-1,1)) == list { + $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma); + } @else { + $transitions : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10); + } + $delays: comma-list(); + $has-delays: false; + $webkit-value: comma-list(); + $moz-value: comma-list(); + $o-value: comma-list(); + + // This block can be made considerably simpler at the point in time that + // we no longer need to deal with the differences in how delays are treated. + @each $transition in $transitions { + // Extract the values from the list + // (this would be cleaner if nth took a 3rd argument to provide a default value). + $property: nth($transition, 1); + $duration: false; + $timing-function: false; + $delay: false; + @if length($transition) > 1 { $duration: nth($transition, 2); } + @if length($transition) > 2 { $timing-function: nth($transition, 3); } + @if length($transition) > 3 { $delay: nth($transition, 4); $has-delays: true; } + + // If a delay is provided without a timing function + @if is-time($timing-function) and not $delay { $delay: $timing-function; $timing-function: false; $has-delays: true; } + + // Keep a list of delays in case one is specified + $delays: append($delays, if($delay, $delay, 0s)); + + $webkit-value: append($webkit-value, compact(prefixed-for-transition(-webkit, $property) $duration $timing-function)); + $moz-value: append( $moz-value, compact(prefixed-for-transition( -moz, $property) $duration $timing-function $delay)); + $o-value: append( $o-value, compact(prefixed-for-transition( -o, $property) $duration $timing-function $delay)); + } + + @if $experimental-support-for-webkit { -webkit-transition : $webkit-value; + // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it. + @if $has-delays { -webkit-transition-delay : $delays; } } + @if $experimental-support-for-mozilla { -moz-transition : $moz-value; } + @if $experimental-support-for-opera { -o-transition : $o-value; } + transition : $transitions; +} + +// coerce a list to be comma delimited or make a new, empty comma delimited list. +@function comma-list($list: ()) { + @return join((), $list, comma); +} + +// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`. +@function prefixed-for-transition($prefix, $property) { + @if type-of($property) == list { + $new-list: comma-list(); + @each $v in $property { + $new-list: append($new-list, prefixed-for-transition($prefix, $v)); + } + @return $new-list; + } @else { + @if index($transitionable-prefixed-values, $property) { + @return #{$prefix}-#{$property}; + } @else { + @return $property; + } + } +} + +// Checks if the value given is a unit of time. +@function is-time($value) { + @if type-of($value) == number { + @return not not index(s ms, unit($value)); + } @else { + @return false; + } +} diff --git a/lib/compass/css3/_user-interface.scss b/lib/compass/css3/_user-interface.scss new file mode 100644 index 0000000..e78b2fe --- /dev/null +++ b/lib/compass/css3/_user-interface.scss @@ -0,0 +1,17 @@ +// User Interface ------------------------------------------------------------ +// This file can be expanded to handle all the user interface properties as +// they become available in browsers: +// http://www.w3.org/TR/2000/WD-css3-userint-20000216 +@import "shared"; + + +// This property controls the selection model and granularity of an element. +// +// @param $select +// [ none | text | toggle | element | elements | all | inherit ] +@mixin user-select($select) { + $select: unquote($select); + @include experimental(user-select, $select, + -moz, -webkit, not -o, not -ms, -khtml, official + ); +} diff --git a/lib/compass/layout/_grid-background.scss b/lib/compass/layout/_grid-background.scss new file mode 100644 index 0000000..4d3820c --- /dev/null +++ b/lib/compass/layout/_grid-background.scss @@ -0,0 +1,178 @@ +@import "../css3/images"; +@import "../css3/background-size"; + +// Set the color of your columns +$grid-background-column-color : rgba(100, 100, 225, 0.25) !default; +// Set the color of your gutters +$grid-background-gutter-color : rgba(0, 0, 0, 0) !default; + +// Set the total number of columns in your grid +$grid-background-total-columns : 24 !default; +// Set the width of your columns +$grid-background-column-width : 30px !default; +// Set the width of your gutters +$grid-background-gutter-width : 10px !default; +// Set the offset, if your columns are padded in from the container edge +$grid-background-offset : 0px !default; + +// Set the color of your baseline +$grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default; +// Set the height of your baseline grid +$grid-background-baseline-height : 1.5em !default; + +// toggle your columns grids on and off +$show-column-grid-backgrounds : true !default; +// toggle your vertical grids on and off +$show-baseline-grid-backgrounds : true !default; +// toggle all your grids on and off +$show-grid-backgrounds : true !default; + +// optionally force your grid-image to remain fluid +// no matter what units you used to declared your grid. +$grid-background-force-fluid : false !default; + + +// Create the gradient needed for baseline grids +@function get-baseline-gradient( + $color : $grid-background-baseline-color +) { + $gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%); + @return $gradient; +} + +// Create the color-stops needed for horizontal grids +@function build-grid-background( + $total : $grid-background-total-columns, + $column : $grid-background-column-width, + $gutter : $grid-background-gutter-width, + $offset : $grid-background-offset, + $column-color : $grid-background-column-color, + $gutter-color : $grid-background-gutter-color +) { + $grid: compact(); + $grid: append($grid, $gutter-color $offset, comma); + @for $i from 0 to $total { + + // $a represents the start of this column, initially equal to the offset + $a: $offset; + @if $i > 0 { $a: $a + (($column + $gutter) * $i); } + + // $g represents the start of this gutter, equal to $a plus one column-width + $g: $a + $column; + + // $z represents the end of a gutter, equal to $g plus one gutter-width + $z: $g + $gutter; + + @if (unit($a) == "%") and ($i == ($total - 1)) { + $z: 100%; + } + + // and we add this column/gutter pair to our grid + $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z)); + } + + @return $grid; +} + +// Return the gradient needed for horizontal grids +@function get-column-gradient( + $total : $grid-background-total-columns, + $column : $grid-background-column-width, + $gutter : $grid-background-gutter-width, + $offset : $grid-background-offset, + $column-color : $grid-background-column-color, + $gutter-color : $grid-background-gutter-color, + $force-fluid : $grid-background-force-fluid +) { + $grid: unquote(""); + + // don't force fluid grids when they are already fluid. + @if unit($column) == "%" { $force-fluid: false; } + + @if $force-fluid { + $grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color); + } @else { + $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color); + } + + // return the horizontal grid as a gradient + $gradient: linear-gradient(left, $grid); + @return $gradient; +} + +// Convert a grid from fixed units into percentages. +@function get-column-fluid-grid( + $total : $grid-background-total-columns, + $column : $grid-background-column-width, + $gutter : $grid-background-gutter-width, + $offset : $grid-background-offset, + $column-color : $grid-background-column-color, + $gutter-color : $grid-background-gutter-color +) { + $context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2)); + $offset: $offset / $context * 100%; + $column: $column / $context * 100%; + $gutter: $gutter / $context * 100%; + + // return the horizontal grid as a set of color-stops + $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color); + @return $grid; +} + + +// Add just the baseline grid to an element's background +@mixin baseline-grid-background( + $baseline : $grid-background-baseline-height, + $color : $grid-background-baseline-color +) { + @if $show-grid-backgrounds and $show-baseline-grid-backgrounds { + @include background-image(get-baseline-gradient($color)); + @include background-size(100% $baseline); + background-position: left top; + } +} + +// Add just the horizontal grid to an element's background +@mixin column-grid-background( + $total : $grid-background-total-columns, + $column : $grid-background-column-width, + $gutter : $grid-background-gutter-width, + $offset : $grid-background-offset, + $column-color : $grid-background-column-color, + $gutter-color : $grid-background-gutter-color, + $force-fluid : $grid-background-force-fluid +) { + @if $show-grid-backgrounds and $show-column-grid-backgrounds { + @include background-image( + get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid) + ); + background-position: left top; + } +} + +// Add both horizontal and baseline grids to an element's background +@mixin grid-background( + $total : $grid-background-total-columns, + $column : $grid-background-column-width, + $gutter : $grid-background-gutter-width, + $baseline : $grid-background-baseline-height, + $offset : $grid-background-offset, + $column-color : $grid-background-column-color, + $gutter-color : $grid-background-gutter-color, + $baseline-color : $grid-background-baseline-color, + $force-fluid : $grid-background-force-fluid +) { + @if $show-grid-backgrounds { + @if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds { + @include background-image( + get-baseline-gradient($baseline-color), + get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid) + ); + @include background-size(100% $baseline, auto); + background-position: left top; + } @else { + @include baseline-grid-background($baseline, $baseline-color); + @include column-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid); + } + } +} diff --git a/lib/compass/layout/_sticky-footer.scss b/lib/compass/layout/_sticky-footer.scss new file mode 100644 index 0000000..055f641 --- /dev/null +++ b/lib/compass/layout/_sticky-footer.scss @@ -0,0 +1,23 @@ +// Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/). +// +// Must be mixed into the top level of your stylesheet. +// +// Footer element must be outside of root wrapper element. +// +// Footer must be a fixed height. + +@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) { + html, body { + height: 100%; } + #{$root-selector} { + clear: both; + min-height: 100%; + height: auto !important; + height: 100%; + margin-bottom: -$footer-height; + #{$root-footer-selector} { + height: $footer-height; } } + #{$footer-selector} { + clear: both; + position: relative; + height: $footer-height; } } diff --git a/lib/compass/layout/_stretching.scss b/lib/compass/layout/_stretching.scss new file mode 100644 index 0000000..c123e3d --- /dev/null +++ b/lib/compass/layout/_stretching.scss @@ -0,0 +1,24 @@ + +// stretch element height to specified top and bottom position + +@mixin stretch-y($offset-top:0, $offset-bottom:0) { + @include stretch($offset-top, false, $offset-bottom, false); +} + + +// stretch element width to specified left and right position + +@mixin stretch-x($offset-left:0, $offset-right:0) { + @include stretch(false, $offset-right, false, $offset-left); +} + + +// shorthand to stretch element height and width + +@mixin stretch($offset-top:0, $offset-right:0, $offset-bottom:0, $offset-left:0) { + position: absolute; + @if $offset-top { top: $offset-top; } + @if $offset-bottom { bottom: $offset-bottom; } + @if $offset-left { left: $offset-left; } + @if $offset-right { right: $offset-right; } +} \ No newline at end of file diff --git a/lib/compass/reset/_utilities-legacy.scss b/lib/compass/reset/_utilities-legacy.scss new file mode 100644 index 0000000..8273ca3 --- /dev/null +++ b/lib/compass/reset/_utilities-legacy.scss @@ -0,0 +1,135 @@ +// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) +// Global reset rules. +// For more specific resets, use the reset mixins provided below +// +// *Please Note*: tables still need `cellspacing="0"` in the markup. +@mixin global-reset { + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, font, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td { + @include reset-box-model; + @include reset-font; } + body { + @include reset-body; } + ol, ul { + @include reset-list-style; } + table { + @include reset-table; } + caption, th, td { + @include reset-table-cell; } + q, blockquote { + @include reset-quotation; } + a img { + @include reset-image-anchor-border; } } + +// Reset all elements within some selector scope. To reset the selector itself, +// mixin the appropriate reset mixin for that element type as well. This could be +// useful if you want to style a part of your page in a dramatically different way. +// +// *Please Note*: tables still need `cellspacing="0"` in the markup. +@mixin nested-reset { + div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, + pre, a, abbr, acronym, address, code, del, dfn, em, img, + dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr { + @include reset-box-model; + @include reset-font; } + table { + @include reset-table; } + caption, th, td { + @include reset-table-cell; } + q, blockquote { + @include reset-quotation; } + a img { + @include reset-image-anchor-border; } } + +// Reset the box model measurements. +@mixin reset-box-model { + margin: 0; + padding: 0; + border: 0; + outline: 0; } + +// Reset the font and vertical alignment. +@mixin reset-font { + font: { + weight: inherit; + style: inherit; + size: 100%; + family: inherit; }; + vertical-align: baseline; } + +// Resets the outline when focus. +// For accessibility you need to apply some styling in its place. +@mixin reset-focus { + outline: 0; } + +// Reset a body element. +@mixin reset-body { + line-height: 1; + color: black; + background: white; } + +// Reset the list style of an element. +@mixin reset-list-style { + list-style: none; } + +// Reset a table +@mixin reset-table { + border-collapse: separate; + border-spacing: 0; + vertical-align: middle; } + +// Reset a table cell (`th`, `td`) +@mixin reset-table-cell { + text-align: left; + font-weight: normal; + vertical-align: middle; } + +// Reset a quotation (`q`, `blockquote`) +@mixin reset-quotation { + quotes: "" ""; + &:before, &:after { + content: ""; } } + +// Resets the border. +@mixin reset-image-anchor-border { + border: none; } + +// Unrecognized elements are displayed inline. +// This reset provides a basic reset for html5 elements +// so they are rendered correctly in browsers that don't recognize them +// and reset in browsers that have default styles for them. +@mixin reset-html5 { + #{elements-of-type(html5-block)} { + @include reset-box-model; + display: block; } } + +// Resets the display of inline and block elements to their default display +// according to their tag type. Elements that have a default display that varies across +// versions of html or browser are not handled here, but this covers the 90% use case. +// Usage Example: +// +// // Turn off the display for both of these classes +// .unregistered-only, .registered-only +// display: none +// // Now turn only one of them back on depending on some other context. +// body.registered +// +reset-display(".registered-only") +// body.unregistered +// +reset-display(".unregistered-only") +@mixin reset-display($selector: "", $important: false) { + #{append-selector(elements-of-type("inline"), $selector)} { + @if $important { + display: inline !important; } + @else { + display: inline; } } + #{append-selector(elements-of-type("block"), $selector)} { + @if $important { + display: block !important; } + @else { + display: block; } } } diff --git a/lib/compass/reset/_utilities.scss b/lib/compass/reset/_utilities.scss new file mode 100644 index 0000000..d173f3e --- /dev/null +++ b/lib/compass/reset/_utilities.scss @@ -0,0 +1,142 @@ +// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html) +// Global reset rules. +// For more specific resets, use the reset mixins provided below +@mixin global-reset { + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + @include reset-box-model; + @include reset-font; } + // Unlike Eric's original reset, we reset the html element to be compatible + // with the vertical rhythm mixins. + html { + @include reset-body; } + ol, ul { + @include reset-list-style; } + table { + @include reset-table; } + caption, th, td { + @include reset-table-cell; } + q, blockquote { + @include reset-quotation; } + a img { + @include reset-image-anchor-border; } + @include reset-html5; } + +// Reset all elements within some selector scope. To reset the selector itself, +// mixin the appropriate reset mixin for that element type as well. This could be +// useful if you want to style a part of your page in a dramatically different way. +@mixin nested-reset { + div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + @include reset-box-model; + @include reset-font; } + table { + @include reset-table; } + caption, th, td { + @include reset-table-cell; } + q, blockquote { + @include reset-quotation; } + a img { + @include reset-image-anchor-border; } } + +// Reset the box model measurements. +@mixin reset-box-model { + margin: 0; + padding: 0; + border: 0; } + +// Reset the font and vertical alignment. +@mixin reset-font { + font: inherit; + font-size: 100%; + vertical-align: baseline; } + +// Resets the outline when focus. +// For accessibility you need to apply some styling in its place. +@mixin reset-focus { + outline: 0; } + +// Reset a body element. +@mixin reset-body { + line-height: 1; } + +// Reset the list style of an element. +@mixin reset-list-style { + list-style: none; } + +// Reset a table +@mixin reset-table { + border-collapse: collapse; + border-spacing: 0; } + +// Reset a table cell (`th`, `td`) +@mixin reset-table-cell { + text-align: left; + font-weight: normal; + vertical-align: middle; } + +// Reset a quotation (`q`, `blockquote`) +@mixin reset-quotation { + quotes: none; + &:before, &:after { + content: ""; + content: none; } } + +// Resets the border. +@mixin reset-image-anchor-border { + border: none; } + +// Unrecognized elements are displayed inline. +// This reset provides a basic reset for block html5 elements +// so they are rendered correctly in browsers that don't recognize them +// and reset in browsers that have default styles for them. +@mixin reset-html5 { + #{elements-of-type(html5-block)} { + display: block; } } + +// Resets the display of inline and block elements to their default display +// according to their tag type. Elements that have a default display that varies across +// versions of html or browser are not handled here, but this covers the 90% use case. +// Usage Example: +// +// // Turn off the display for both of these classes +// .unregistered-only, .registered-only +// display: none +// // Now turn only one of them back on depending on some other context. +// body.registered +// +reset-display(".registered-only") +// body.unregistered +// +reset-display(".unregistered-only") +@mixin reset-display($selector: "", $important: false) { + #{append-selector(elements-of-type("inline"), $selector)} { + @if $important { + display: inline !important; } + @else { + display: inline; } } + #{append-selector(elements-of-type("block"), $selector)} { + @if $important { + display: block !important; } + @else { + display: block; } } } diff --git a/lib/compass/typography/_links.scss b/lib/compass/typography/_links.scss new file mode 100644 index 0000000..735000e --- /dev/null +++ b/lib/compass/typography/_links.scss @@ -0,0 +1,3 @@ +@import "links/hover-link"; +@import "links/link-colors"; +@import "links/unstyled-link"; diff --git a/lib/compass/typography/_lists.scss b/lib/compass/typography/_lists.scss new file mode 100644 index 0000000..3365f30 --- /dev/null +++ b/lib/compass/typography/_lists.scss @@ -0,0 +1,4 @@ +@import "lists/horizontal-list"; +@import "lists/inline-list"; +@import "lists/inline-block-list"; +@import "lists/bullets"; diff --git a/lib/compass/typography/_text.scss b/lib/compass/typography/_text.scss new file mode 100644 index 0000000..885f729 --- /dev/null +++ b/lib/compass/typography/_text.scss @@ -0,0 +1,4 @@ +@import "text/ellipsis"; +@import "text/nowrap"; +@import "text/replacement"; +@import "text/force-wrap"; diff --git a/lib/compass/typography/_vertical_rhythm.scss b/lib/compass/typography/_vertical_rhythm.scss new file mode 100644 index 0000000..baef446 --- /dev/null +++ b/lib/compass/typography/_vertical_rhythm.scss @@ -0,0 +1,221 @@ +@import "../layout/grid-background"; + +// The base font size. +$base-font-size: 16px !default; + +// The base line height determines the basic unit of vertical rhythm. +$base-line-height: 24px !default; + +// Set the default border style for rhythm borders. +$default-rhythm-border-style: solid !default; + +// The default font size in all browsers. +$browser-default-font-size: 16px; + +// Set to false if you want to use absolute pixels in sizing your typography. +$relative-font-sizing: true !default; + +// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function +// to round the line height to the nearest half line height instead of the +// nearest integral line height to avoid large spacing between lines. +$round-to-nearest-half-line: false !default; + +// Ensure there is at least this many pixels +// of vertical padding above and below the text. +$min-line-padding: 2px !default; + +// $base-font-size but in your output unit of choice. +// Defaults to 1em when `$relative-font-sizing` is true. +$font-unit: if($relative-font-sizing, 1em, $base-font-size) !default; + +// The basic unit of font rhythm. +$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit; + +// The leader is the amount of whitespace in a line. +// It might be useful in your calculations. +$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size; + +// The half-leader is the amount of whitespace above and below a line. +// It might be useful in your calculations. +$base-half-leader: $base-leader / 2; + +// True if a number has a relative unit. +@function relative-unit($number) { + @return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem" +} + +// True if a number has an absolute unit. +@function absolute-unit($number) { + @return not (relative-unit($number) or unitless($number)); +} + +@if $relative-font-sizing and not relative-unit($font-unit) { + @warn "$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit."; +} + +// Establishes a font baseline for the given font-size. +@mixin establish-baseline($font-size: $base-font-size) { + // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts + // whose root is set in ems. So we set the root font size in percentages of + // the default font size. + * html { + font-size: 100% * ($font-size / $browser-default-font-size); + } + html { + font-size: $font-size; + @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size)); + } +} + +// Resets the line-height to 1 vertical rhythm unit. +// Does not work on elements whose font-size is different from $base-font-size. +// +// @deprecated This mixin will be removed in the next release. +// Please use the `adjust-leading-to` mixin instead. +@mixin reset-baseline { + @include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size)); +} + +// Show a background image that can be used to debug your alignments. +// Include the $img argument if you would rather use your own image than the +// Compass default gradient image. +@mixin debug-vertical-alignment($img: false) { + @if $img { + background: image-url($img); + } @else { + @include baseline-grid-background($base-rhythm-unit); + } +} + +// Adjust a block to have a different font size and line height to maintain the +// rhythm. $lines specifies how many multiples of the baseline rhythm each line +// of this font should use up. It does not have to be an integer, but it +// defaults to the smallest integer that is large enough to fit the font. +// Use $from-size to adjust from a font-size other than the base font-size. +@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) { + @if not $relative-font-sizing and $from-size != $base-font-size { + @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to"; + } + font-size: $font-unit * $to-size / $from-size; + @include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size)); +} + +// Adjust a block to have different line height to maintain the rhythm. +// $lines specifies how many multiples of the baseline rhythm each line of this +// font should use up. It does not have to be an integer, but it defaults to the +// smallest integer that is large enough to fit the font. +@mixin adjust-leading-to($lines, $font-size: $base-font-size) { + line-height: rhythm($lines, $font-size); +} + +// Calculate rhythm units. +@function rhythm( + $lines: 1, + $font-size: $base-font-size, + $offset: 0 +) { + @if not $relative-font-sizing and $font-size != $base-font-size { + @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function"; + } + $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size; + // Round the pixels down to nearest integer. + @if unit($rhythm) == px { + $rhythm: floor($rhythm); + } + @return $rhythm; +} + +// Calculate the minimum multiple of rhythm units needed to contain the font-size. +@function lines-for-font-size($font-size) { + $lines: if($round-to-nearest-half-line, + ceil(2 * $font-size / $base-line-height) / 2, + ceil($font-size / $base-line-height)); + @if $lines * $base-line-height - $font-size < $min-line-padding * 2 { + $lines: $lines + if($round-to-nearest-half-line, 0.5, 1); + } + @return $lines; +} + +// Apply leading whitespace. The $property can be margin or padding. +@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) { + #{$property}-top: rhythm($lines, $font-size); +} + +// Apply leading whitespace as padding. +@mixin padding-leader($lines: 1, $font-size: $base-font-size) { + padding-top: rhythm($lines, $font-size); +} + +// Apply leading whitespace as margin. +@mixin margin-leader($lines: 1, $font-size: $base-font-size) { + margin-top: rhythm($lines, $font-size); +} + +// Apply trailing whitespace. The $property can be margin or padding. +@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) { + #{$property}-bottom: rhythm($lines, $font-size); +} + +// Apply trailing whitespace as padding. +@mixin padding-trailer($lines: 1, $font-size: $base-font-size) { + padding-bottom: rhythm($lines, $font-size); +} + +// Apply trailing whitespace as margin. +@mixin margin-trailer($lines: 1, $font-size: $base-font-size) { + margin-bottom: rhythm($lines, $font-size); +} + +// Shorthand mixin to apply whitespace for top and bottom margins and padding. +@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) { + @include leader($leader, $font-size); + @include padding-leader($padding-leader, $font-size); + @include padding-trailer($padding-trailer, $font-size); + @include trailer($trailer, $font-size); +} + +// Apply a border and whitespace to any side without destroying the vertical +// rhythm. The whitespace must be greater than the width of the border. +@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { + @if not $relative-font-sizing and $font-size != $base-font-size { + @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"; + } + border-#{$side}: { + style: $border-style; + width: $font-unit * $width / $font-size; + }; + padding-#{$side}: rhythm($lines, $font-size, $offset: $width); +} + +// Apply borders and whitespace equally to all sides. +@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { + @if not $relative-font-sizing and $font-size != $base-font-size { + @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders"; + } + border: { + style: $border-style; + width: $font-unit * $width / $font-size; + }; + padding: rhythm($lines, $font-size, $offset: $width); +} + +// Apply a leading border. +@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { + @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); +} + +// Apply a trailing border. +@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { + @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); +} + +// Apply both leading and trailing borders. +@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { + @include leading-border($width, $lines, $font-size, $border-style); + @include trailing-border($width, $lines, $font-size, $border-style); +} + +// Alias for `horizontal-borders` mixin. +@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { + @include horizontal-borders($width, $lines, $font-size, $border-style); +} diff --git a/lib/compass/typography/links/_hover-link.scss b/lib/compass/typography/links/_hover-link.scss new file mode 100644 index 0000000..8c72bc1 --- /dev/null +++ b/lib/compass/typography/links/_hover-link.scss @@ -0,0 +1,5 @@ +// a link that only has an underline when you hover over it +@mixin hover-link { + text-decoration: none; + &:hover { + text-decoration: underline; } } diff --git a/lib/compass/typography/links/_link-colors.scss b/lib/compass/typography/links/_link-colors.scss new file mode 100644 index 0000000..5d641f7 --- /dev/null +++ b/lib/compass/typography/links/_link-colors.scss @@ -0,0 +1,28 @@ +// Set all the colors for a link with one mixin call. +// Order of arguments is: +// +// 1. normal +// 2. hover +// 3. active +// 4. visited +// 5. focus +// +// Those states not specified will inherit. +// Mixin to an anchor link like so: +// a +// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0) + +@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) { + color: $normal; + @if $visited { + &:visited { + color: $visited; } } + @if $focus { + &:focus { + color: $focus; } } + @if $hover { + &:hover { + color: $hover; } } + @if $active { + &:active { + color: $active; } } } diff --git a/lib/compass/typography/links/_unstyled-link.scss b/lib/compass/typography/links/_unstyled-link.scss new file mode 100644 index 0000000..e39c2d6 --- /dev/null +++ b/lib/compass/typography/links/_unstyled-link.scss @@ -0,0 +1,7 @@ +// A link that looks and acts like the text it is contained within +@mixin unstyled-link { + color: inherit; + text-decoration: inherit; + cursor: inherit; + &:active, &:focus { + outline: none; } } diff --git a/lib/compass/typography/lists/_bullets.scss b/lib/compass/typography/lists/_bullets.scss new file mode 100644 index 0000000..958eefc --- /dev/null +++ b/lib/compass/typography/lists/_bullets.scss @@ -0,0 +1,34 @@ +// Turn off the bullet for an element of a list +@mixin no-bullet { + list-style-image : none; + list-style-type : none; + margin-left : 0; +} + +// turns off the bullets for an entire list +@mixin no-bullets { + list-style: none; + li { @include no-bullet; } +} + +// Make a list(ul/ol) have an image bullet. +// +// The mixin should be used like this for an icon that is 5x7: +// +// ul.pretty +// +pretty-bullets("my-icon.png", 5px, 7px) +// +// Additionally, if the image dimensions are not provided, +// The image dimensions will be extracted from the image itself. +// +// ul.pretty +// +pretty-bullets("my-icon.png") +// +@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) { + margin-left: 0; + li { + padding-left: $padding; + background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2; + list-style-type: none; + } +} diff --git a/lib/compass/typography/lists/_horizontal-list.scss b/lib/compass/typography/lists/_horizontal-list.scss new file mode 100644 index 0000000..58d3778 --- /dev/null +++ b/lib/compass/typography/lists/_horizontal-list.scss @@ -0,0 +1,61 @@ +// Horizontal list layout module. +// +// Easy mode using simple descendant li selectors: +// +// ul.nav +// +horizontal-list +// +// Advanced mode: +// If you need to target the list items using a different selector then use +// +horizontal-list-container on your ul/ol and +horizontal-list-item on your li. +// This may help when working on layouts involving nested lists. For example: +// +// ul.nav +// +horizontal-list-container +// > li +// +horizontal-list-item + +@import "bullets"; +@import "../../utilities/general/clearfix"; +@import "../../utilities/general/reset"; +@import "../../utilities/general/float"; + +// Can be mixed into any selector that target a ul or ol that is meant +// to have a horizontal layout. Used to implement +horizontal-list. +@mixin horizontal-list-container { + @include reset-box-model; + @include clearfix; } + +// Can be mixed into any li selector that is meant to participate in a horizontal layout. +// Used to implement +horizontal-list. +// +// :last-child is not fully supported +// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix +// +// IE8 ignores rules that are included on the same line as :last-child +// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details +// +// Setting `$padding` to `false` disables the padding between list elements +@mixin horizontal-list-item($padding: 4px, $direction: left) { + @include no-bullet; + white-space: nowrap; + @include float($direction); + @if $padding { + padding: { + left: $padding; + right: $padding; + } + &:first-child, &.first { padding-#{$direction}: 0; } + &:last-child { padding-#{opposite-position($direction)}: 0; } + &.last { padding-#{opposite-position($direction)}: 0; } + } +} + +// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap. +// This is not an inline list. +// +// Setting `$padding` to `false` disables the padding between list elements +@mixin horizontal-list($padding: 4px, $direction: left) { + @include horizontal-list-container; + li { + @include horizontal-list-item($padding, $direction); } } diff --git a/lib/compass/typography/lists/_inline-block-list.scss b/lib/compass/typography/lists/_inline-block-list.scss new file mode 100644 index 0000000..a738f57 --- /dev/null +++ b/lib/compass/typography/lists/_inline-block-list.scss @@ -0,0 +1,50 @@ +// Inline-Block list layout module. +// +// Easy mode using simple descendant li selectors: +// +// ul.nav { +// @import inline-block-list; +// } +// +// Advanced mode: +// If you need to target the list items using a different selector then use +// `@include inline-block-list-container` on your ul/ol and +// `@include inline-block-list-item` on your li. This may help when working +// on layouts involving nested lists. For example: +// +// ul.nav { +// @include inline-block-list-container; +// > li { +// @include inline-block-list-item; +// } +// } + +@import "bullets"; +@import "horizontal-list"; +@import "../../utilities/general/float"; +@import "../../css3/inline-block"; + +// Can be mixed into any selector that target a ul or ol that is meant +// to have an inline-block layout. Used to implement `inline-block-list`. +@mixin inline-block-list-container { + @include horizontal-list-container; } + +// Can be mixed into any li selector that is meant to participate in a horizontal layout. +// Used to implement `inline-block-list`. +@mixin inline-block-list-item($padding: false) { + @include no-bullet; + @include inline-block; + white-space: nowrap; + @if $padding { + padding: { + left: $padding; + right: $padding; + }; + } +} + +// A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap. +@mixin inline-block-list($padding: false) { + @include inline-block-list-container; + li { + @include inline-block-list-item($padding); } } diff --git a/lib/compass/typography/lists/_inline-list.scss b/lib/compass/typography/lists/_inline-list.scss new file mode 100644 index 0000000..caff6fd --- /dev/null +++ b/lib/compass/typography/lists/_inline-list.scss @@ -0,0 +1,44 @@ +// makes a list inline. + +@mixin inline-list { + list-style-type: none; + &, & li { + margin: 0px; + padding: 0px; + display: inline; + } +} + +// makes an inline list delimited with the passed string. +// Defaults to making a comma-separated list. +// +// Please make note of the browser support issues before using this mixin: +// +// use of `content` and `:after` is not fully supported in all browsers. +// See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15) +// +// `:last-child` is not fully supported. +// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29). +// +// IE8 ignores rules that are included on the same line as :last-child +// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details + +@mixin delimited-list($separator: ", ") { + @include inline-list; + li { + &:after { content: $separator; } + &:last-child { + &:after { content: ""; } + } + &.last { + &:after { content: ""; } + } + } +} + +// See [delimited-list](#mixin-delimited-list) +// @deprecated +@mixin comma-delimited-list { + @warn "comma-delimited-list is deprecated. Please use delimited-list instead."; + @include delimited-list; +} diff --git a/lib/compass/typography/text/_ellipsis.scss b/lib/compass/typography/text/_ellipsis.scss new file mode 100644 index 0000000..0cbcda7 --- /dev/null +++ b/lib/compass/typography/text/_ellipsis.scss @@ -0,0 +1,25 @@ +@import "../../css3/shared"; + +// To get full firefox support, you must install the ellipsis pattern: +// +// compass install compass/ellipsis +$use-mozilla-ellipsis-binding: false !default; + +// This technique, by [Justin Maxwell](http://code404.com/), was originally +// published [here](http://mattsnider.com/css/css-string-truncation-with-ellipsis/). +// Firefox implementation by [Rikkert Koppes](http://www.rikkertkoppes.com/thoughts/2008/6/). +@mixin ellipsis($no-wrap: true) { + @if $no-wrap { white-space: nowrap; } + overflow: hidden; + @include experimental(text-overflow, ellipsis, + not -moz, + not -webkit, + -o, + -ms, + not -khtml, + official + ); + @if $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding { + -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis")); + } +} diff --git a/lib/compass/typography/text/_force-wrap.scss b/lib/compass/typography/text/_force-wrap.scss new file mode 100644 index 0000000..8a14e8f --- /dev/null +++ b/lib/compass/typography/text/_force-wrap.scss @@ -0,0 +1,12 @@ +// Prevent long urls and text from breaking layouts +// [originally from perishablepress.com](http://perishablepress.com/press/2010/06/01/wrapping-content/) +@mixin force-wrap { + white-space: pre; // CSS 2.0 + white-space: pre-wrap; // CSS 2.1 + white-space: pre-line; // CSS 3.0 + white-space: -pre-wrap; // Opera 4-6 + white-space: -o-pre-wrap; // Opera 7 + white-space: -moz-pre-wrap; // Mozilla + white-space: -hp-pre-wrap; // HP Printers + word-wrap: break-word; // IE 5+ +} diff --git a/lib/compass/typography/text/_nowrap.scss b/lib/compass/typography/text/_nowrap.scss new file mode 100644 index 0000000..1613dd6 --- /dev/null +++ b/lib/compass/typography/text/_nowrap.scss @@ -0,0 +1,2 @@ +// When remembering whether or not there's a hyphen in white-space is too hard +@mixin nowrap { white-space: nowrap; } diff --git a/lib/compass/typography/text/_replacement.scss b/lib/compass/typography/text/_replacement.scss new file mode 100644 index 0000000..703571b --- /dev/null +++ b/lib/compass/typography/text/_replacement.scss @@ -0,0 +1,68 @@ +// Indicates the direction you prefer to move your text +// when hiding it. +// +// `left` is more robust, especially in older browsers. +// `right` seems have better runtime performance. +$hide-text-direction: left !default; + +// Hides html text and replaces it with an image. +// If you use this on an inline element, you will need to change the display to block or inline-block. +// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height. +// +// Parameters: +// +// * `img` -- the relative path from the project image directory to the image, or a url literal. +// * `x` -- the x position of the background image. +// * `y` -- the y position of the background image. +@mixin replace-text($img, $x: 50%, $y: 50%) { + @include hide-text; + background: { + @if is-url($img) { + image: $img; + } @else { + image: image-url($img); + } + repeat: no-repeat; + position: $x $y; + }; +} + +// Like the `replace-text` mixin, but also sets the width +// and height of the element according the dimensions of the image. +// +// If you set `$inline` to true, then an inline image (data uri) will be used. +@mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%, $inline: false) { + @include replace-text(if($inline, inline-image($img), $img), $x, $y); + width: image-width($img); + height: image-height($img); +} + +// Hides text in an element so you can see the background. +// +// The direction indicates how the text should be moved out of view. +// +// See `$hide-text-direction` for more information and to set this globally +// for your application. +@mixin hide-text($direction: $hide-text-direction) { + @if $direction == left { + $approximate-em-value: 12px / 1em; + $wider-than-any-screen: -9999em; + text-indent: $wider-than-any-screen * $approximate-em-value; + overflow: hidden; + text-align: left; + } @else { + // slightly wider than the box prevents issues with inline-block elements + text-indent: 110%; + white-space: nowrap; + overflow: hidden; + } +} + +// Hides text in an element by squishing the text into oblivion. +// Use this if you need to hide text contained in an inline element +// but still have it read by a screen reader. +@mixin squish-text { + font: 0/0 serif; + text-shadow: none; + color: transparent; +} diff --git a/lib/compass/utilities/_color.scss b/lib/compass/utilities/_color.scss new file mode 100644 index 0000000..0cc7fd1 --- /dev/null +++ b/lib/compass/utilities/_color.scss @@ -0,0 +1 @@ +@import "color/contrast"; \ No newline at end of file diff --git a/lib/compass/utilities/_general.scss b/lib/compass/utilities/_general.scss new file mode 100644 index 0000000..047e636 --- /dev/null +++ b/lib/compass/utilities/_general.scss @@ -0,0 +1,6 @@ +@import "general/reset"; +@import "general/clearfix"; +@import "general/float"; +@import "general/tag-cloud"; +@import "general/hacks"; +@import "general/min"; diff --git a/lib/compass/utilities/_links.scss b/lib/compass/utilities/_links.scss new file mode 100644 index 0000000..e0e3251 --- /dev/null +++ b/lib/compass/utilities/_links.scss @@ -0,0 +1,5 @@ +@warn "This import is deprecated. Use 'compass/typography/links' instead."; + +@import "../typography/links/hover-link"; +@import "../typography/links/link-colors"; +@import "../typography/links/unstyled-link"; diff --git a/lib/compass/utilities/_lists.scss b/lib/compass/utilities/_lists.scss new file mode 100644 index 0000000..4833ee1 --- /dev/null +++ b/lib/compass/utilities/_lists.scss @@ -0,0 +1,6 @@ +@warn "This import is deprecated. Use 'compass/typography/lists' instead."; + +@import "../typography/lists/horizontal-list"; +@import "../typography/lists/inline-list"; +@import "../typography/lists/inline-block-list"; +@import "../typography/lists/bullets"; diff --git a/lib/compass/utilities/_print.scss b/lib/compass/utilities/_print.scss new file mode 100644 index 0000000..4771e08 --- /dev/null +++ b/lib/compass/utilities/_print.scss @@ -0,0 +1,17 @@ +// Classes that are useful for controlling what gets printed. +// You must mix `+print-utilities` into your print stylesheet +// and `+print-utilities(screen)` into your screen stylesheet. +// Note: these aren't semantic. +@mixin print-utilities($media: print) { + @if $media == print { + .noprint, .no-print { display: none; } + #{elements-of-type(block)} { + &.print-only { display: block; } + } + #{elements-of-type(inline)} { + &.print-only { display: inline; } + } + } @else { + .print-only { display: none; } + } +} diff --git a/lib/compass/utilities/_sprites.scss b/lib/compass/utilities/_sprites.scss new file mode 100644 index 0000000..0066804 --- /dev/null +++ b/lib/compass/utilities/_sprites.scss @@ -0,0 +1,2 @@ +@import "sprites/base"; +@import "sprites/sprite-img"; diff --git a/lib/compass/utilities/_tables.scss b/lib/compass/utilities/_tables.scss new file mode 100644 index 0000000..4af1d51 --- /dev/null +++ b/lib/compass/utilities/_tables.scss @@ -0,0 +1,3 @@ +@import "tables/alternating-rows-and-columns"; +@import "tables/borders"; +@import "tables/scaffolding"; diff --git a/lib/compass/utilities/_text.scss b/lib/compass/utilities/_text.scss new file mode 100644 index 0000000..bb73c25 --- /dev/null +++ b/lib/compass/utilities/_text.scss @@ -0,0 +1,5 @@ +@warn "This import is deprecated. Use 'compass/typography/text' instead."; + +@import "../typography/text/ellipsis"; +@import "../typography/text/nowrap"; +@import "../typography/text/replacement"; diff --git a/lib/compass/utilities/color/_contrast.scss b/lib/compass/utilities/color/_contrast.scss new file mode 100644 index 0000000..fc73905 --- /dev/null +++ b/lib/compass/utilities/color/_contrast.scss @@ -0,0 +1,28 @@ +$contrasted-dark-default: #000 !default; +$contrasted-light-default: #fff !default; +$contrasted-lightness-threshold: 30% !default; + +// Returns the `$light` color when the `$color` is dark +// and the `$dark` color when the `$color` is light. +// The `$threshold` is a percent between `0%` and `100%` and it determines +// when the lightness of `$color` changes from "dark" to "light". +@function contrast-color( + $color, + $dark: $contrasted-dark-default, + $light: $contrasted-light-default, + $threshold: $contrasted-lightness-threshold +) { + @return if(lightness($color) < $threshold, $light, $dark) +} + +// Sets the specified background color and calculates a dark or light contrasted text color. +// The arguments are passed through to the [contrast-color function](#function-contrast-color). +@mixin contrasted( + $background-color, + $dark: $contrasted-dark-default, + $light: $contrasted-light-default, + $threshold: $contrasted-lightness-threshold +) { + background-color: $background-color; + color: contrast-color($background-color, $dark, $light, $threshold); +} \ No newline at end of file diff --git a/lib/compass/utilities/general/_clearfix.scss b/lib/compass/utilities/general/_clearfix.scss new file mode 100644 index 0000000..73f9254 --- /dev/null +++ b/lib/compass/utilities/general/_clearfix.scss @@ -0,0 +1,44 @@ +// @doc off +// Extends the bottom of the element to enclose any floats it contains. +// @doc on + +@import "hacks"; + +// This basic method is preferred for the usual case, when positioned +// content will not show outside the bounds of the container. +// +// Recommendations include using this in conjunction with a width. +// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html) +@mixin clearfix { + overflow: hidden; + @include has-layout; +} + +// This older method from Position Is Everything called +// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html) +// has the advantage of allowing positioned elements to hang +// outside the bounds of the container at the expense of more tricky CSS. +@mixin legacy-pie-clearfix { + &:after { + content : "\0020"; + display : block; + height : 0; + clear : both; + overflow : hidden; + visibility : hidden; + } + @include has-layout; +} + +// This is an updated version of the PIE clearfix method that reduces the amount of CSS output. +// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead. +// +// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) +@mixin pie-clearfix { + &:after { + content: ""; + display: table; + clear: both; + } + @include has-layout; +} diff --git a/lib/compass/utilities/general/_float.scss b/lib/compass/utilities/general/_float.scss new file mode 100644 index 0000000..914f184 --- /dev/null +++ b/lib/compass/utilities/general/_float.scss @@ -0,0 +1,30 @@ +// Implementation of float:left with fix for the +// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html) +@mixin float-left { + @include float(left); } + +// Implementation of float:right with fix for the +// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html) +@mixin float-right { + @include float(right); } + +// Direction independent float mixin that fixes the +// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html) +@mixin float($side: left) { + display: inline; + float: unquote($side); } + +// Resets floated elements back to their default of `float: none` and defaults +// to `display: block` unless you pass `inline` as an argument +// +// Usage Example: +// +// body.homepage +// #footer li +// +float-left +// body.signup +// #footer li +// +reset-float +@mixin reset-float($display: block) { + float: none; + display: $display; } \ No newline at end of file diff --git a/lib/compass/utilities/general/_hacks.scss b/lib/compass/utilities/general/_hacks.scss new file mode 100644 index 0000000..706265e --- /dev/null +++ b/lib/compass/utilities/general/_hacks.scss @@ -0,0 +1,46 @@ +@import "../../support"; + +// The `zoom` approach generates less CSS but does not validate. +// Set this to `block` to use the display-property to hack the +// element to gain layout. +$default-has-layout-approach: zoom !default; + +// This mixin causes an element matching the selector +// to gain the "hasLayout" property in internet explorer. +// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout). +@mixin has-layout($approach: $default-has-layout-approach) { + @if $legacy-support-for-ie { + @if $approach == zoom { + @include has-layout-zoom; + } @else if $approach == block { + @include has-layout-block; + } @else { + @warn "Unknown has-layout approach: #{$approach}"; + @include has-layout-zoom; + } + } +} + +@mixin has-layout-zoom { + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *zoom: 1; + } +} + +@mixin has-layout-block { + @if $legacy-support-for-ie { + // This makes ie6 get layout + display: inline-block; + // and this puts it back to block + & { display: block; } + } +} + +// A hack to supply IE6 (and below) with a different property value. +// [Read more](http://www.cssportal.com/css-hacks/#in_css-important). +@mixin bang-hack($property, $value, $ie6-value) { + @if $legacy-support-for-ie6 { + #{$property}: #{$value} !important; + #{$property}: #{$ie6-value}; + } +} diff --git a/lib/compass/utilities/general/_min.scss b/lib/compass/utilities/general/_min.scss new file mode 100644 index 0000000..99a676b --- /dev/null +++ b/lib/compass/utilities/general/_min.scss @@ -0,0 +1,16 @@ +@import "hacks"; + +//** +// Cross browser min-height mixin. +@mixin min-height($value) { + @include hacked-minimum(height, $value); } + +//** +// Cross browser min-width mixin. +@mixin min-width($value) { + @include hacked-minimum(width, $value); } + +// @private This mixin is not meant to be used directly. +@mixin hacked-minimum($property, $value) { + min-#{$property}: $value; + @include bang-hack($property, auto, $value); } diff --git a/lib/compass/utilities/general/_reset.scss b/lib/compass/utilities/general/_reset.scss new file mode 100644 index 0000000..c51915f --- /dev/null +++ b/lib/compass/utilities/general/_reset.scss @@ -0,0 +1,2 @@ +// This module has moved. +@import "../../reset/utilities"; \ No newline at end of file diff --git a/lib/compass/utilities/general/_tabs.scss b/lib/compass/utilities/general/_tabs.scss new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/lib/compass/utilities/general/_tabs.scss @@ -0,0 +1 @@ + diff --git a/lib/compass/utilities/general/_tag-cloud.scss b/lib/compass/utilities/general/_tag-cloud.scss new file mode 100644 index 0000000..7ccae05 --- /dev/null +++ b/lib/compass/utilities/general/_tag-cloud.scss @@ -0,0 +1,18 @@ +// Emits styles for a tag cloud +@mixin tag-cloud($base-size: 1em) { + font-size: $base-size; + line-height: 1.2 * $base-size; + .xxs, .xs, .s, .l, .xl, .xxl { + line-height: 1.2 * $base-size; } + .xxs { + font-size: $base-size / 2; } + .xs { + font-size: 2 * $base-size / 3; } + .s { + font-size: 3 * $base-size / 4; } + .l { + font-size: 4 * $base-size / 3; } + .xl { + font-size: 3 * $base-size / 2; } + .xxl { + font-size: 2 * $base-size; } } diff --git a/lib/compass/utilities/links/_hover-link.scss b/lib/compass/utilities/links/_hover-link.scss new file mode 100644 index 0000000..843459f --- /dev/null +++ b/lib/compass/utilities/links/_hover-link.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/links/hover-link' instead."; + +@import "../../typography/links/hover-link"; diff --git a/lib/compass/utilities/links/_link-colors.scss b/lib/compass/utilities/links/_link-colors.scss new file mode 100644 index 0000000..fac9438 --- /dev/null +++ b/lib/compass/utilities/links/_link-colors.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/links/link-colors' instead."; + +@import "../../typography/links/link-colors"; diff --git a/lib/compass/utilities/links/_unstyled-link.scss b/lib/compass/utilities/links/_unstyled-link.scss new file mode 100644 index 0000000..1c48f46 --- /dev/null +++ b/lib/compass/utilities/links/_unstyled-link.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/links/unstyled-link' instead."; + +@import "../../typography/links/unstyled-link"; diff --git a/lib/compass/utilities/lists/_bullets.scss b/lib/compass/utilities/lists/_bullets.scss new file mode 100644 index 0000000..796e1cd --- /dev/null +++ b/lib/compass/utilities/lists/_bullets.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/lists/bullets' instead."; + +@import "../../typography/lists/bullets"; diff --git a/lib/compass/utilities/lists/_horizontal-list.scss b/lib/compass/utilities/lists/_horizontal-list.scss new file mode 100644 index 0000000..38ae85c --- /dev/null +++ b/lib/compass/utilities/lists/_horizontal-list.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/lists/horizontal-list' instead."; + +@import "../../typography/lists/horizontal-list"; diff --git a/lib/compass/utilities/lists/_inline-block-list.scss b/lib/compass/utilities/lists/_inline-block-list.scss new file mode 100644 index 0000000..5d4a129 --- /dev/null +++ b/lib/compass/utilities/lists/_inline-block-list.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/lists/inline-block-list' instead."; + +@import "../../typography/lists/inline-block-list"; diff --git a/lib/compass/utilities/lists/_inline-list.scss b/lib/compass/utilities/lists/_inline-list.scss new file mode 100644 index 0000000..fb1dfeb --- /dev/null +++ b/lib/compass/utilities/lists/_inline-list.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/lists/inline-list' instead."; + +@import "../../typography/lists/inline-list"; diff --git a/lib/compass/utilities/sprites/_base.scss b/lib/compass/utilities/sprites/_base.scss new file mode 100644 index 0000000..1b268a8 --- /dev/null +++ b/lib/compass/utilities/sprites/_base.scss @@ -0,0 +1,66 @@ +// Determines those states for which you want to enable magic sprite selectors +$sprite-selectors: hover, target, active !default; + +// Set the width and height of an element to the original +// dimensions of an image before it was included in the sprite. +@mixin sprite-dimensions($map, $sprite) { + height: image-height(sprite-file($map, $sprite)); + width: image-width(sprite-file($map, $sprite)); +} + +// Set the background position of the given sprite `$map` to display the +// sprite of the given `$sprite` name. You can move the image relative to its +// natural position by passing `$offset-x` and `$offset-y`. +@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0) { + background-position: sprite-position($map, $sprite, $offset-x, $offset-y); +} + + +// Determines if you want to include magic selectors in your sprites +$disable-magic-sprite-selectors:false !default; + +// Include the position and (optionally) dimensions of this `$sprite` +// in the given sprite `$map`. The sprite url should come from either a base +// class or you can specify the `sprite-url` explicitly like this: +// +// background: $map no-repeat; +@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) { + @include sprite-background-position($map, $sprite, $offset-x, $offset-y); + @if $dimensions { + @include sprite-dimensions($map, $sprite); + } + @if not $disable-magic-sprite-selectors { + @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y); + } +} + +// Include the selectors for the `$sprite` given the `$map` and the +// `$full-sprite-name` +// @private +@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) { + @each $selector in $sprite-selectors { + @if sprite_has_selector($map, $sprite-name, $selector) { + &:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} { + @include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y); + } + } + } +} + +// Generates a class for each space separated name in `$sprite-names`. +// The class will be of the form .-. +// +// If a base class is provided, then each class will extend it. +// +// If `$dimensions` is `true`, the sprite dimensions will specified. +@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) { + @each $sprite-name in $sprite-names { + @if sprite_does_not_have_parent($map, $sprite-name) { + $full-sprite-name: "#{$prefix}-#{$sprite-name}"; + .#{$full-sprite-name} { + @if $base-class { @extend #{$base-class}; } + @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y); + } + } + } +} \ No newline at end of file diff --git a/lib/compass/utilities/sprites/_sprite-img.scss b/lib/compass/utilities/sprites/_sprite-img.scss new file mode 100644 index 0000000..ff90c00 --- /dev/null +++ b/lib/compass/utilities/sprites/_sprite-img.scss @@ -0,0 +1,79 @@ +// @doc off +// Example 1: +// +// a.twitter +// +sprite-img("icons-32.png", 1) +// a.facebook +// +sprite-img("icons-32png", 2) +// +// Example 2: +// +// a +// +sprite-background("icons-32.png") +// a.twitter +// +sprite-column(1) +// a.facebook +// +sprite-row(2) +// @doc on + +$sprite-default-size: 32px !default; + +$sprite-default-margin: 0px !default; + +$sprite-image-default-width: $sprite-default-size !default; + +$sprite-image-default-height: $sprite-default-size !default; + +// Sets all the rules for a sprite from a given sprite image to show just one of the sprites. +// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning. +@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { + @include sprite-background($img, $width, $height); + @include sprite-position($col, $row, $width, $height, $margin); +} + +// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region. +@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) { + @include sprite-background-rectangle($img, $width, $height); +} + +// Sets rules common for all sprites, assumes a rectangular region. +@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) { + background: image-url($img) no-repeat; + width: $width; + height: $height; + overflow: hidden; +} + +// Allows horizontal sprite positioning optimized for a single row of sprites. +@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) { + @include sprite-position($col, 1, $width, 0px, $margin); +} + +// Allows vertical sprite positioning optimized for a single column of sprites. +@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { + @include sprite-position(1, $row, 0px, $height, $margin); +} + +// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites. +@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { + $x: ($col - 1) * -$width - ($col - 1) * $margin; + $y: ($row - 1) * -$height - ($row - 1) * $margin; + background-position: $x $y; +} + + + +// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions +@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) { + @include hide-text; + @include sprite($map, $sprite, $dimensions, $offset-x, $offset-y); + background-image: $map; + background-repeat: no-repeat; +} + +// Similar to 'replace-text-with-dimensions' but with sprites +// To use, create your sprite and then pass it in the `$map` param +// The name of the image in the sprite folder should be `$img-name` +@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){ + @include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y); +} \ No newline at end of file diff --git a/lib/compass/utilities/tables/_alternating-rows-and-columns.scss b/lib/compass/utilities/tables/_alternating-rows-and-columns.scss new file mode 100644 index 0000000..4da78e2 --- /dev/null +++ b/lib/compass/utilities/tables/_alternating-rows-and-columns.scss @@ -0,0 +1,22 @@ +@mixin alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white) { + th { + background-color: $header-color; + &.even, &:nth-child(2n) { + background-color: $header-color - $dark-intersection; } } + tr { + &.odd, &:nth-child(2n+1) { + td { + background-color: $odd-row-color; + &.even, &:nth-child(2n) { + background-color: $odd-row-color - $dark-intersection; } } } + } + tr.even { + td { + background-color: $even-row-color; + &.even, &:nth-child(2n) { + background-color: $even-row-color - $dark-intersection; } } } + tfoot { + th, td { + background-color: $footer-color; + &.even, &:nth-child(2n) { + background-color: $footer-color - $dark-intersection; } } } } diff --git a/lib/compass/utilities/tables/_borders.scss b/lib/compass/utilities/tables/_borders.scss new file mode 100644 index 0000000..120896d --- /dev/null +++ b/lib/compass/utilities/tables/_borders.scss @@ -0,0 +1,33 @@ +@mixin outer-table-borders($width: 2px, $color: black) { + border: $width solid $color; + thead { + th { + border-bottom: $width solid $color; } } + tfoot { + th, td { + border-top: $width solid $color; } } + th { + &:first-child { + border-right: $width solid $color; } } } + +@mixin inner-table-borders($width: 2px, $color: black) { + th, td { + border: { + right: $width solid $color; + bottom: $width solid $color; + left-width: 0px; + top-width: 0px; }; + &:last-child, + &.last { + border-right-width: 0px; } } + +// IE8 ignores rules that are included on the same line as :last-child +// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details + + tbody, tfoot { + tr:last-child { + th, td { + border-bottom-width: 0px; } } + tr.last { + th, td { + border-bottom-width: 0px; } } } } diff --git a/lib/compass/utilities/tables/_scaffolding.scss b/lib/compass/utilities/tables/_scaffolding.scss new file mode 100644 index 0000000..cc19d04 --- /dev/null +++ b/lib/compass/utilities/tables/_scaffolding.scss @@ -0,0 +1,9 @@ +@mixin table-scaffolding { + th { + text-align: center; + font-weight: bold; } + td, + th { + padding: 2px; + &.numeric { + text-align: right; } } } diff --git a/lib/compass/utilities/text/_ellipsis.scss b/lib/compass/utilities/text/_ellipsis.scss new file mode 100644 index 0000000..b172754 --- /dev/null +++ b/lib/compass/utilities/text/_ellipsis.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/text/ellipsis' instead."; + +@import "../../typography/text/ellipsis"; diff --git a/lib/compass/utilities/text/_nowrap.scss b/lib/compass/utilities/text/_nowrap.scss new file mode 100644 index 0000000..ca4a22f --- /dev/null +++ b/lib/compass/utilities/text/_nowrap.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/text/nowrap' instead."; + +@import "../../typography/text/nowrap"; diff --git a/lib/compass/utilities/text/_replacement.scss b/lib/compass/utilities/text/_replacement.scss new file mode 100644 index 0000000..809c6a8 --- /dev/null +++ b/lib/compass/utilities/text/_replacement.scss @@ -0,0 +1,3 @@ +@warn "This import is deprecated. Use 'compass/typography/text/replacement' instead."; + +@import "../../typography/text/replacement";