Update demo to show image clipping

cotag · Apr 7, 2015 · f095a25 · f095a25
1 parent 7c329ff
commit f095a25
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/_orbicular.scss b/_orbicular.scss
@@ -131,7 +131,6 @@
             }
 
             &> div {
-                position: relative;
                 display: table;
                 width: 100%;
                 height: 100%;
@@ -142,6 +141,7 @@
                     height: 100%;
 
                     &> div {
+                        position: relative;
                         display: table-cell;
 
                         font-size: $actualFontSize;

diff --git a/demo/colorful-triangles-background.jpg b/demo/colorful-triangles-background.jpg
diff --git a/demo/index.html b/demo/index.html
@@ -30,6 +30,15 @@
             </orbicular>
         </div>
 
+        <br />
+        <br />
+
+        <div class="container">
+            <orbicular>
+                <img src="./colorful-triangles-background.jpg">
+            </orbicular>
+        </div>
+
         <script src="../bower_components/angular/angular.js"></script>
         <script src="../orbicular.js"></script>
     </body>

diff --git a/demo/style.css b/demo/style.css
@@ -62,6 +62,7 @@ orbicular > div.co-shadow, [orbicular] > div.co-shadow {
 orbicular > div.co-content, [orbicular] > div.co-content {
   position: absolute;
   overflow: hidden;
+  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
   height: 0.84em;
   width: 0.84em;
   margin-left: 0.08em;
@@ -72,21 +73,21 @@ orbicular > div.co-content, [orbicular] > div.co-content {
   -moz-border-radius: 0.42em;
   box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
 }
-/* line 130, ../_orbicular.scss */
+/* line 133, ../_orbicular.scss */
 orbicular > div.co-content > div, [orbicular] > div.co-content > div {
-  position: relative;
   display: table;
   width: 100%;
   height: 100%;
 }
-/* line 136, ../_orbicular.scss */
+/* line 138, ../_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 */
+/* line 143, ../_orbicular.scss */
 orbicular > div.co-content > div > div > div, [orbicular] > div.co-content > div > div > div {
+  position: relative;
   display: table-cell;
   font-size: 0.08em;
   color: #FFF;
@@ -101,3 +102,12 @@ div.container {
   width: 15em;
   height: 15em;
 }
+
+/* line 13, style.scss */
+img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/demo/style.scss b/demo/style.scss
@@ -9,3 +9,11 @@ div.container {
     height: 15em;
 }
 
+
+img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}