update to resin

Gruntfile.js

@@ -27,63 +27,45 @@ module.exports = function(grunt) {
             release: ['css']
         },
 
-        stylus: {
+        topcoat: {
+            options: {
+                browsers: ['last 2 versions']
+            },
             compile: {
-                options: {
-                    paths: ['node_modules/topcoat-utils/src/mixins'],
-                    import: ['utils'],
-                    compress: false,
-                },
                 files: [{
-                    src: 'src/radio-button.styl',
-                    dest: 'css/radio-button.css'
-                }]
+                        src: 'test/fixtures/radio-button.css',
+                        dest: 'css/radio-button.css',
+                    }
+                ]
             }
         },
 
         cssmin: {
             minify: {
                 expand: true,
-                cwd: 'css/',
+                cwd: 'css',
                 src: ['*.css', '!*.min.css'],
-                dest: 'css/',
+                dest: 'css',
                 ext: '.min.css'
             },
         },
 
-        jade: {
-            compile: {
-                expand: true,
-                cwd: 'test/perf',
-                src: ['*.jade'],
-                dest: 'test/perf/',
-                ext: '.test.html'
-            }
-        },
-
         simplemocha: {
             all: {
                 src: ['test/*.test.js']
             }
-        },
-
-        watch: {
-            files: 'src/**/*.styl',
-            tasks: ['build', 'test']
         }
     });
 
     // These plugins provide necessary tasks.
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-contrib-stylus');
+    grunt.loadNpmTasks('grunt-topcoat');
     grunt.loadNpmTasks('grunt-simple-mocha');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
-    grunt.loadNpmTasks('grunt-contrib-jade');
     grunt.loadNpmTasks('grunt-contrib-clean');
 
     grunt.registerTask('default', ['clean', 'build', 'test', 'release']);
-    grunt.registerTask('build', ['stylus', 'jade']);
+    grunt.registerTask('build', ['topcoat']);
     grunt.registerTask('test', ['simplemocha']);
     grunt.registerTask('release', ['cssmin']);
 
-};
+};

css/radio-button.css

@@ -1,20 +1,3 @@
-/**
-*
-* Copyright 2012 Adobe Systems Inc.;
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*
-*/
 input[type="radio"] {
   position: absolute;
   overflow: hidden;
@@ -25,39 +8,48 @@ input[type="radio"] {
   vertical-align: top;
   outline: none;
 }
-.radio-button {
-  box-sizing: border-box;
-  background-clip: padding-box;
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
+
+.radio-button,
+.radio-button__label {
   cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
+
+.radio-button,
+.radio-button:before {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-clip: padding-box;
+}
+
+.radio-button,
 .radio-button__label {
   position: relative;
   display: inline-block;
   vertical-align: top;
+}
+
+.radio-button:disabled {
+  opacity: 0.3;
   cursor: default;
-  user-select: none;
+  pointer-events: none;
 }
-.radio-button:before,
-.radio-button:after {
+
+.radio-button:before {
   content: '';
   position: absolute;
   border-radius: 100%;
 }
+
 .radio-button:after {
+  content: '';
+  position: absolute;
+  border-radius: 100%;
   top: 50%;
   left: 50%;
+  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-}
-.radio-button:before {
-  box-sizing: border-box;
-  background-clip: padding-box;
-}
-.radio-button--disabled {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.1",
   "description": "Topcoat radio button base",
   "main": "index.html",
+  "style": "src/radio-button.css",
   "directories": {
     "test": "test",
     "lib": "src",
@@ -24,18 +25,23 @@
     "base",
     "adobe"
   ],
-  "author": "@dam Kristofer Joseph",
-  "license": "Apache2",
+  "author": "Kristofer Joseph (http://twitter.com/dam)",
+  "contributors": [
+    "Kristofer Joseph (http://twitter.com/dam)",
+    "Garth Braithwaite (http://garthdb.com/)"
+  ],
+  "license": "Apache",
   "devDependencies": {
     "grunt": "~0.4.1",
-    "grunt-contrib-watch": "~0.3.1",
+    "grunt-contrib-watch": "~0.4.4",
+    "grunt-contrib-cssmin": "~0.6.1",
+    "grunt-contrib-jade": "~0.7.0",
+    "grunt-contrib-clean": "~0.5.0",
     "grunt-simple-mocha": "~0.4.0",
-    "grunt-contrib-stylus": "~0.5.0",
-    "grunt-contrib-clean": "~0.4.1",
-    "grunt-contrib-cssmin": "~0.6.0",
-    "grunt-contrib-jade": "~0.5.0"
+    "grunt-rework": "0.0.6",
+    "grunt-topcoat": "~0.1.3"
   },
   "dependencies": {
-    "topcoat-utils": "~0.1.3"
+    "topcoat-utils": "~0.3.0"
   }
 }

src/radio-button.styl → src/radio-button.css

@@ -15,33 +15,39 @@
 * limitations under the License.
 *
 */
-@import utils
+@import "topcoat-utils";
 
-input[type="radio"]
-  hide-input()
+input[type="radio"] {
+  extend: %hide-input;
+}
 
-.radio-button
-  reset-box-model()
-  inline-block()
-  reset-cursor()
+%radio-button {
+  extend: %reset-box-model;
+  extend: %inline-block;
+  extend: %reset-cursor;
+}
 
-.radio-button__label
-  inline-block()
-  reset-cursor()
+%radio-button__label {
+  extend: %inline-block;
+  extend: %reset-cursor;
+}
 
-.radio-button:before,
-.radio-button:after
-  content ''
-  position absolute
-  border-radius 100%
+%radio-button--before {
+  extend: %reset-box-model;
+  content: '';
+  position: absolute;
+  border-radius: 100%;
+}
 
-.radio-button:after
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
+%radio-button--after {
+  content: '';
+  position: absolute;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
-.radio-button:before
-  reset-box-model()
-
-.radio-button--disabled
-  disabled()
+%radio-button--disabled {
+  extend: %disabled;
+}

test/expected/radio-button.css

@@ -1,20 +1,3 @@
-/**
-*
-* Copyright 2012 Adobe Systems Inc.;
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*
-*/
 input[type="radio"] {
   position: absolute;
   overflow: hidden;
@@ -25,39 +8,48 @@ input[type="radio"] {
   vertical-align: top;
   outline: none;
 }
-.radio-button {
-  box-sizing: border-box;
-  background-clip: padding-box;
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
+
+.radio-button,
+.radio-button__label {
   cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
+
+.radio-button,
+.radio-button:before {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-clip: padding-box;
+}
+
+.radio-button,
 .radio-button__label {
   position: relative;
   display: inline-block;
   vertical-align: top;
+}
+
+.radio-button:disabled {
+  opacity: 0.3;
   cursor: default;
-  user-select: none;
+  pointer-events: none;
 }
-.radio-button:before,
-.radio-button:after {
+
+.radio-button:before {
   content: '';
   position: absolute;
   border-radius: 100%;
 }
+
 .radio-button:after {
+  content: '';
+  position: absolute;
+  border-radius: 100%;
   top: 50%;
   left: 50%;
+  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-}
-.radio-button:before {
-  box-sizing: border-box;
-  background-clip: padding-box;
-}
-.radio-button--disabled {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
+}

src/copyright.styl → test/fixtures/radio-button.css

@@ -15,3 +15,24 @@
 * limitations under the License.
 *
 */
+@import "./src/radio-button.css";
+
+.radio-button {
+  extend: %radio-button;
+}
+
+.radio-button__label {
+  extend: %radio-button__label;
+}
+
+.radio-button:before{
+  extend: %radio-button--before;
+}
+
+.radio-button:after {
+  extend: %radio-button--after;
+}
+
+.radio-button:disabled {
+  extend: %radio-button--disabled;
+}