Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #306 from netlemur/remove-vendor-border-radius

Remove vendor prefix for border-radius
  • Loading branch information...
commit a186cd24b54cea8238a68ab70f1983e48878a13d 2 parents 061612c + 303fe96
@slang800 slang800 authored
View
8 docs/README.md
@@ -117,21 +117,13 @@ button
```css
button {
- -webkit-border-radius: 1px 2px/3px 4px;
- -moz-border-radius: 1px 2px/3px 4px;
border-radius: 1px 2px/3px 4px;
}
button {
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
border-radius: 5px;
}
button {
- -moz-border-radius-topleft: 10px;
- -webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
- -moz-border-radius-bottomright: 10px;
- -webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
```
View
53 lib/nib/border-radius.styl
@@ -0,0 +1,53 @@
+/*
+ * Helper for border-radius().
+ */
+
+-apply-border-radius(pos, importance)
+ if length(pos) == 3
+ // border-radius: <top | bottom> <left | right> <n>
+ y = pos[0]
+ x = pos[1]
+ // We don't use vendor for boder-radius anymore
+ // vendor('border-radius-%s%s' % pos, pos[2], only: webkit official)
+ {'border-%s-%s-radius' % pos}: pos[2] importance
+ else if pos[0] in (top bottom)
+ // border-radius: <top | bottom> <n>
+ -apply-border-radius(pos[0] left pos[1], importance)
+ -apply-border-radius(pos[0] right pos[1], importance)
+ else if pos[0] in (left right)
+ // border-radius: <left | right> <n>
+ unshift(pos, top);
+ -apply-border-radius(pos, importance)
+ pos[0] = bottom
+ -apply-border-radius(pos, importance)
+
+/*
+ * border-radius supporting augmented behavior.
+ *
+ * Examples:
+ *
+ * border-radius: 2px 5px
+ * border-radius: top 5px bottom 10px
+ * border-radius: left 5px
+ * border-radius: top left 5px
+ * border-radius: top left 10px bottom right 5px
+ * border-radius: top left 10px, bottom right 5px
+ *
+ */
+
+border-radius()
+ pos = ()
+ augmented = false
+ importance = arguments[length(arguments) - 1] == !important ? !important : unquote('')
+
+ for args in arguments
+ for arg in args
+ if arg is a 'ident'
+ append(pos, arg)
+ augmented = true
+ else
+ append(pos, arg)
+ if augmented
+ -apply-border-radius(pos, importance)
+ pos = ()
+ border-radius pos unless augmented
View
1  lib/nib/index.styl
@@ -1,4 +1,5 @@
@import 'border'
+@import 'border-radius'
@import 'clearfix'
@import 'color-image'
@import 'flex'
View
54 lib/nib/vendor.styl
@@ -455,60 +455,6 @@ text-size-adjust()
font-smoothing()
vendor('font-smoothing', arguments, only: webkit)
-/*
- * Helper for border-radius().
- */
-
--apply-border-radius(pos, importance)
- if length(pos) == 3
- // border-radius: <top | buttom> <left | right> <n>
- y = pos[0]
- x = pos[1]
- // We don't use moz for simple boder-radius anymore
- // vendor('border-radius-%s%s' % pos, pos[2], only: moz)
- vendor('border-%s-%s-radius' % pos, pos[2] importance, only: webkit official)
- else if pos[0] in (top bottom)
- // border-radius: <top | bottom> <n>
- -apply-border-radius(pos[0] left pos[1], importance)
- -apply-border-radius(pos[0] right pos[1], importance)
- else if pos[0] in (left right)
- // border-radius: <left | right> <n>
- unshift(pos, top);
- -apply-border-radius(pos, importance)
- pos[0] = bottom
- -apply-border-radius(pos, importance)
-
-/*
- * border-radius supporting vendor prefixes and
- * augmented behavior.
- *
- * Examples:
- *
- * border-radius: 2px 5px
- * border-radius: top 5px bottom 10px
- * border-radius: left 5px
- * border-radius: top left 5px
- * border-radius: top left 10px bottom right 5px
- * border-radius: top left 10px, bottom right 5px
- *
- */
-
-border-radius()
- pos = ()
- augmented = false
- importance = arguments[length(arguments) - 1] == !important ? !important : unquote('')
-
- for args in arguments
- for arg in args
- if arg is a 'ident'
- append(pos, arg)
- augmented = true
- else
- append(pos, arg)
- if augmented
- -apply-border-radius(pos, importance)
- pos = ()
- vendor('border-radius', pos, only: webkit official) unless augmented
/**
* Vendor input-placeholder/placeholder support.
View
33 test/cases/border-radius.css
@@ -0,0 +1,33 @@
+button {
+ border-radius: 1px 2px/3px 4px;
+}
+button {
+ border-top-left-radius: 10px;
+}
+button {
+ border-top-left-radius: 10px !important;
+}
+button {
+ border-bottom-right-radius: 5px;
+}
+button {
+ border-top-left-radius: 5px;
+ border-bottom-right-radius: 10px;
+}
+button {
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+button {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+button {
+ border-top-left-radius: 5px;
+ border-bottom-right-radius: 10px;
+}
+button {
+ border-radius: 5px;
+}
View
2  test/cases/vendor.border-radius.styl → test/cases/border-radius.styl
@@ -1,4 +1,4 @@
-@import 'nib/vendor'
+@import 'nib/border-radius'
button
border-radius: 1px 2px / 3px 4px
View
1  test/cases/importance.css
@@ -55,7 +55,6 @@
border-right: 1px !important;
border-bottom: 1px !important;
border-left: 1px !important;
- -webkit-border-radius: 50% !important;
border-radius: 50% !important;
border-top-right-radius: 50% !important;
border-top-left-radius: 50% !important;
View
48 test/cases/vendor.border-radius.css
@@ -1,48 +0,0 @@
-button {
- -webkit-border-radius: 1px 2px/3px 4px;
- border-radius: 1px 2px/3px 4px;
-}
-button {
- -webkit-border-top-left-radius: 10px;
- border-top-left-radius: 10px;
-}
-button {
- -webkit-border-top-left-radius: 10px !important;
- border-top-left-radius: 10px !important;
-}
-button {
- -webkit-border-bottom-right-radius: 5px;
- border-bottom-right-radius: 5px;
-}
-button {
- -webkit-border-top-left-radius: 5px;
- border-top-left-radius: 5px;
- -webkit-border-bottom-right-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-button {
- -webkit-border-bottom-left-radius: 10px;
- border-bottom-left-radius: 10px;
- -webkit-border-bottom-right-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-button {
- -webkit-border-top-left-radius: 5px;
- border-top-left-radius: 5px;
- -webkit-border-top-right-radius: 5px;
- border-top-right-radius: 5px;
- -webkit-border-bottom-left-radius: 10px;
- border-bottom-left-radius: 10px;
- -webkit-border-bottom-right-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-button {
- -webkit-border-top-left-radius: 5px;
- border-top-left-radius: 5px;
- -webkit-border-bottom-right-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-button {
- -webkit-border-radius: 5px;
- border-radius: 5px;
-}
Please sign in to comment.
Something went wrong with that request. Please try again.