Merge pull request #18 from cotag/mixin

merge branch mixin
cotag · Dec 3, 2014 · 4dee20b · 4dee20b
2 parents 6a72125 + 1f3b74d
commit 4dee20b
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 10 deletions.
diff --git a/.bowerrc b/.bowerrc
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,6 @@ node_modules
 dist
 .tmp
 .sass-cache
-app/bower_components
+bower_components/
 *.DS_Store
 *.log
diff --git a/_orbicular.scss b/_orbicular.scss
@@ -43,10 +43,11 @@
     $actualBarWidth: $calculatedWidth + em;
     $actualFontSize: $fontSize / 100 + em;
 
+
     // this is the core progress class
-    div.co-circle-progress {
+    orbicular, [orbicular] {
+        display: block;
         position: relative;
-        width: 100%;
         height: 1em;
         @include co-box-sizing(border-box);
 
@@ -75,6 +76,12 @@
             -o-transition: -o-transform $transTime $transFunc;
             transition: -webkit-transform $transTime $transFunc;
             transition: transform $transTime $transFunc;
+
+            // This may promote the layer to a composited layer.
+            // Should reduce flickering..
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+            will-change: transform;
         }
 
         &> div.co-circle {

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Orbicular Demo</title>
+        <meta name="viewport" content="width=device-width">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body ng-app="Orbicular">
+
+        <div class="container" ng-init="downloaded=23; total=100">
+            <orbicular progression="downloaded" total="total" resize>
+                HTML in the circle
+                <button ng-click="$parent.$parent.downloaded=80">
+                    More Progress
+                </button>
+            </orbicular>
+        </div>
+
+        <script src="../bower_components/angular/angular.js"></script>
+        <script src="../orbicular.js"></script>
+    </body>
+</html>
diff --git a/demo/style.css b/demo/style.css
@@ -0,0 +1,103 @@
+/* line 48, ../_orbicular.scss */
+orbicular, [orbicular] {
+  display: block;
+  position: relative;
+  height: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-color: #EEE;
+  border-radius: 0.5em;
+  -webkit-border-radius: 0.5em;
+  -moz-border-radius: 0.5em;
+}
+/* line 54, ../_orbicular.scss */
+orbicular *, orbicular *:after, orbicular *:before, [orbicular] *, [orbicular] *:after, [orbicular] *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+/* line 63, ../_orbicular.scss */
+orbicular > div.co-circle, orbicular div.co-fill, [orbicular] > div.co-circle, [orbicular] div.co-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  background: transparent;
+  border-radius: 0.5em;
+  -webkit-border-radius: 0.5em;
+  -moz-border-radius: 0.5em;
+  -webkit-transition: -webkit-transform 0.3s linear;
+  -moz-transition: -moz-transform 0.3s linear;
+  -ms-transition: -ms-transform 0.3s linear;
+  -o-transition: -o-transform 0.3s linear;
+  transition: -webkit-transform 0.3s linear;
+  transition: transform 0.3s linear;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+}
+/* line 87, ../_orbicular.scss */
+orbicular > div.co-circle, [orbicular] > div.co-circle {
+  clip: rect(0px, 1em, 1em, 0.5em);
+}
+/* line 91, ../_orbicular.scss */
+orbicular > div.co-circle > div.co-fill, [orbicular] > div.co-circle > div.co-fill {
+  clip: rect(0em, 0.5em, 1em, 0em);
+  background-color: #50a6d3;
+}
+/* line 98, ../_orbicular.scss */
+orbicular > div.co-shadow, [orbicular] > div.co-shadow {
+  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2) inset;
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  background: transparent;
+  border-radius: 0.5em;
+  -webkit-border-radius: 0.5em;
+  -moz-border-radius: 0.5em;
+}
+/* line 114, ../_orbicular.scss */
+orbicular > div.co-content, [orbicular] > div.co-content {
+  position: absolute;
+  overflow: hidden;
+  height: 0.84em;
+  width: 0.84em;
+  margin-left: 0.08em;
+  margin-top: 0.08em;
+  background-color: #2b383f;
+  border-radius: 0.42em;
+  -webkit-border-radius: 0.42em;
+  -moz-border-radius: 0.42em;
+  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
+}
+/* line 130, ../_orbicular.scss */
+orbicular > div.co-content > div, [orbicular] > div.co-content > div {
+  position: relative;
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+/* line 136, ../_orbicular.scss */
+orbicular > div.co-content > div > div, [orbicular] > div.co-content > div > div {
+  display: table-row;
+  width: 100%;
+  height: 100%;
+}
+/* line 141, ../_orbicular.scss */
+orbicular > div.co-content > div > div > div, [orbicular] > div.co-content > div > div > div {
+  display: table-cell;
+  font-size: 0.08em;
+  color: #FFF;
+  line-height: 1em;
+  text-align: center;
+  vertical-align: middle;
+  width: 100%;
+}
+
+/* line 7, style.scss */
+div.container {
+  width: 15em;
+  height: 15em;
+}
diff --git a/demo/style.scss b/demo/style.scss
@@ -0,0 +1,11 @@
+
+
+@import "../_orbicular.scss";
+@include orbicular($shadow: 6px 6px 10px rgba(0,0,0,0.2));
+
+
+div.container {
+    width: 15em;
+    height: 15em;
+}
+
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,15 @@
+'use strict';
+
+var gulp = require('gulp');
+var compass = require('gulp-compass');
+
+gulp.task('styles', function () {
+  gulp.src('./demo/*.scss')
+  .pipe(compass({
+    css: 'demo',
+    sass: 'demo'
+  }))
+  .pipe(gulp.dest('demo'));
+});
+
+gulp.task('build', ['styles']);
diff --git a/orbicular.js b/orbicular.js
@@ -62,7 +62,6 @@
 
         return {
           template:
-            '<div class="co-circle-progress">' +
               '<div class="co-circle co-full">' +
                 '<div class="co-fill"></div>' +
               '</div>' +
@@ -79,10 +78,8 @@
                     '<div ng-transclude></div>' +
                   '</div>' +
                 '</div>' +
-              '</div>' +
-            '</div>',
+              '</div>',
           transclude: true,
-          replace: true,
           restrict: 'EA',
           scope: {
             current: '=progression',

diff --git a/package.json b/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "gulp": "^3.8.7",
+    "gulp-compass": "^1.3.1"
+  }
+}