github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[CSS3] Support for specifying horizontal and vertical radii for the shorthand border-radius property.

Browse Source
This commit is contained in:
Chris Eppstein 2010-07-24 00:55:09 -07:00
parent 1a3277858e
commit c02cab30bb
2 changed files with 68 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frameworks/compass/stylesheets/compass/css3/_border-radius.scss
View File

@ -3,9 +3,69 @@
$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;
// -o-border-radius: 4px / 4px;
// -ms-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;
// -o-border-radius: 2px 5px / 3px 6px;
// -ms-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;
// -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
// -ms-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) {
@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,
-o,
-ms,
-khtml,
official
);
}
@else {
@include experimental(border-radius, $radius);
}
}
// Round radius at position by amount.

7
lib/compass/sass_extensions/functions.rb
View File

@ -1,7 +1,11 @@
module Compass::SassExtensions::Functions
end
%w(selectors enumerate urls display inline_image image_size gradient_support font_files constants).each do |func|
%w(
selectors enumerate urls display
inline_image image_size gradient_support
font_files constants lists
).each do |func|
require "compass/sass_extensions/functions/#{func}"
end
@ -15,6 +19,7 @@ module Sass::Script::Functions
include Compass::SassExtensions::Functions::GradientSupport::Functions
include Compass::SassExtensions::Functions::FontFiles
include Compass::SassExtensions::Functions::Constants
include Compass::SassExtensions::Functions::Lists
end
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?