Skip to content
Browse files

add border-radius mixin example

  • Loading branch information...
1 parent 9686554 commit 7b4de0ec25faa8ebc5e0dbf39b0da7bc4e6745ea @tj tj committed
Showing with 75 additions and 0 deletions.
  1. +24 −0 examples/border-radius.css
  2. +51 −0 examples/border-radius.js
View
24 examples/border-radius.css
@@ -0,0 +1,24 @@
+
+button {
+ border-radius: 5px
+}
+
+button {
+ border-radius: top 5px
+}
+
+button {
+ border-radius: 5px 10px
+}
+
+button {
+ border-radius: top 5px bottom 10px
+}
+
+button {
+ border-radius: left 5px
+}
+
+button {
+ border-radius: left 5px right 2px
+}
View
51 examples/border-radius.js
@@ -0,0 +1,51 @@
+
+var rework = require('..')
+ , read = require('fs').readFileSync;
+
+var css = rework(read('examples/border-radius.css', 'utf8'))
+ .use(rework.mixin({ 'border-radius': borderRadius }))
+ .toString()
+
+function borderRadius(str) {
+ var vals = str.split(/\s+/);
+ var pos;
+ var ret;
+
+ for (var i = 0; i < vals.length; ++i) {
+ var val = vals[i];
+ if (isPosition(val)) {
+ ret = ret || {};
+ pos = val;
+ val = vals[++i];
+ switch (pos) {
+ case 'top':
+ case 'bottom':
+ ret['border-' + pos + '-left-radius'] = val;
+ ret['border-' + pos + '-right-radius'] = val;
+ break;
+ case 'left':
+ case 'right':
+ ret['border-top-' + pos + '-radius'] = val;
+ ret['border-bottom-' + pos + '-radius'] = val;
+ break;
+ }
+ }
+ }
+
+ if (!ret) {
+ return {
+ 'border-radius': str
+ }
+ }
+
+ return ret;
+}
+
+function isPosition(str) {
+ return 'top' == str
+ || 'bottom' == str
+ || 'left' == str
+ || 'right' == str;
+}
+
+console.log(css);

0 comments on commit 7b4de0e

Please sign in to comment.
Something went wrong with that request. Please try again.