beta version

jandrade · Apr 30, 2014 · 23619b0 · 23619b0
1 parent a5294ca
commit 23619b0
Show file tree

Hide file tree

Showing 11 changed files with 621 additions and 298 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -23,7 +23,7 @@ module.exports = function(grunt) {
 				dest: 'dist/<%= pkg.name %>.js'
 			},
 			css: {
-				src: 'examples/css/slider.css',
+				src: 'examples/css/bite-slider.css',
 				dest: 'dist/<%= pkg.name %>.css'
 			}
 		},

diff --git a/dist/slider.css b/dist/slider.css
@@ -1,4 +1,4 @@
-/*! slider v1.0.0 2014-03-02 */
+/*! bite-slider v1.0.0 2014-03-02 */
 ul,
 li {
   padding: 0;
@@ -8,7 +8,7 @@ img {
   max-width: 100%;
 }
 
-.slider {
+.bite-slider {
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -21,19 +21,19 @@ img {
   -webkit-perspective: 1000;
 }
 
-  .slider-viewport {
+  .bite-slider-viewport {
     margin: 0 auto;
     overflow: hidden;
   }
 
-  .slider-mask {
+  .bite-slider-mask {
     float: left;
     font-size: 0;
     transition: all 0.5s;
     transform: translate3d(0px,0,0px);
   }
 
-    .slider-mask li {
+    .bite-slider-mask li {
       display: block;
       float: left;
       font-size: 13px;
@@ -45,15 +45,15 @@ img {
       margin: 0;
     }
 
-    .slider-mask li:before,
-    .slider-mask li:after {
+    .bite-slider-mask li:before,
+    .bite-slider-mask li:after {
       -webkit-sizing: border-box;
       -moz-sizing: border-box;
       box-sizing: border-box;
     }
 
-  .slider .prev-btn,
-  .slider .next-btn {
+  .bite-slider .prev-btn,
+  .bite-slider .next-btn {
     color: #000;
     font-size: 2em;
     padding: 2%;
@@ -63,24 +63,24 @@ img {
     z-index: 1;
   }
 
-  .slider .next-btn {
+  .bite-slider .next-btn {
     left: auto;
     right: 0;
   }
 
-  .slider-pager {
+  .bite-slider-pager {
     margin: 0.5em 0;
     text-align: center;
   }
 
-  .slider-pager li {
+  .bite-slider-pager li {
     border: 0;
     display: inline-block;
     margin: 0 5px;
     padding: 0;
   }
 
-    .slider-pager a {
+    .bite-slider-pager a {
       background-color: #999;
       border-radius: 100%;
       display: block;
@@ -92,6 +92,6 @@ img {
       width: 8px;
     }
 
-    .slider-pager .active {
+    .bite-slider-pager .active {
       background-color: #000;
     }
diff --git a/examples/css/slider.css → examples/css/bite-slider.css b/examples/css/slider.css → examples/css/bite-slider.css
@@ -1,13 +1,23 @@
-ul,
-li {
+/**
+ * Reset
+ */
+.bite-slider ul,
+.bite-slider li {
   padding: 0;
 }
 
-img {
+.bite-slider img {
   max-width: 100%;
 }
 
-.slider {
+.bite-slider a {
+  text-decoration: none;
+}
+
+/**
+ * Slider
+ */
+.bite-slider {
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -19,23 +29,27 @@ img {
   perspective: 1000;
   -webkit-perspective: 1000;
 }
+
+  .bite-slider-built {
+    visibility: visible;
+  }
 
-  .slider-viewport {
+  .bite-slider-viewport {
     margin: 0 auto;
     overflow: hidden;
   }
 
-  .slider-mask {
+  .bite-slider-items {
     float: left;
     font-size: 0;
     transition: all 0.5s;
     transform: translate3d(0px,0,0px);
   }
 
     /**
-     * Horizontal Slider (default)
+     * Horizontal bite-slider (default)
      */
-    .slider-mask li {
+    .bite-slider-items li {
       display: block;
       float: left;
       font-size: 13px;
@@ -48,50 +62,58 @@ img {
     }
 
     /**
-     * Vertical Slider
+     * Vertical bite-slider
      */
-    .slider-vertical .slider-mask {
+    .bite-slider-vertical .bite-slider-items {
       width: 100% !important;  
     }
-    .slider-vertical .slider-mask li {
-      width: 100%;
-    }
+      .bite-slider-vertical .bite-slider-items li {
+        width: 100%;
+      }
 
   /**
    * Navigation arrows
    */
-  .slider .prev-btn,
-  .slider .next-btn {
+  .bite-slider .bite-prev-btn,
+  .bite-slider .bite-next-btn {
     color: #000;
-    font-size: 2em;
-    padding: 2%;
+    color: rgba(0, 0, 0, 0.7);
+    font-size: 1.5em;
+    line-height: 1em;
+    padding: 0.5em;
     left: 0;
     position: absolute;
-    top: 30%;
+    top: 50%;
+    margin-top: -0.75em;
     z-index: 1;
   }
 
-  .slider .next-btn {
+  .bite-slider .bite-next-btn {
     left: auto;
     right: 0;
   }
 
+    .bite-slider .bite-prev-btn:hover,
+    .bite-slider .bite-next-btn:hover {
+      color: rgba(0, 0, 0, 1);
+    }
+
   /**
    * Pager
    */
-  .slider-pager {
+  .bite-slider-pager {
     margin: 0.5em 0;
     text-align: center;
   }
 
-  .slider-pager li {
+  .bite-slider-pager li {
     border: 0;
     display: inline-block;
     margin: 0 5px;
     padding: 0;
   }
 
-    .slider-pager a {
+    .bite-slider-pager a {
       background-color: #999;
       border-radius: 100%;
       display: block;
@@ -103,6 +125,6 @@ img {
       width: 8px;
     }
 
-    .slider-pager .active {
+    .bite-slider-pager .bite-active {
       background-color: #000;
     }
diff --git a/examples/css/bite.css b/examples/css/bite.css
@@ -0,0 +1,32 @@
+body {
+	background-color: #dedede;
+	line-height: 1.6em;
+	padding: 1em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: 'Lato', sans-serif;
+}
+
+body, p, code {
+	font-family: 'Lustria', sans-serif;
+}
+
+hr {
+	margin: 2em auto;
+	width: 50%;
+}
+
+*,
+*:after,
+*:before {
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+code {
+	background-color: rgba(200,200,200, 0.6);
+	display: block;
+	margin: 1em 0;
+	padding: 0.5em;
+}