Added special options to carousel, also made its own doc page

williamtrajano · Jun 24, 2016 · 6ce0fdc · 6ce0fdc
1 parent b731cf0
commit 6ce0fdc
Show file tree

Hide file tree

Showing 50 changed files with 828 additions and 232 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -375,7 +375,8 @@ module.exports = function(grunt) {
           "transitions.html": "jade/transitions.jade",
           "fullscreen-slider-demo.html": "jade/fullscreen-slider-demo.jade",
           "pagination.html": "jade/pagination.jade",
-          "breadcrumbs.html": "jade/breadcrumbs.jade"
+          "breadcrumbs.html": "jade/breadcrumbs.jade",
+          "carousel.html": "jade/carousel.jade"
 
 
         }

diff --git a/about.html b/about.html
@@ -81,6 +81,7 @@
             <li class="bold"><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
               <div class="collapsible-body">
                 <ul>
+                  <li><a href="carousel.html">Carousel</a></li>
                   <li><a href="collapsible.html">Collapsible</a></li>
                   <li><a href="dialogs.html">Dialogs</a></li>
                   <li><a href="dropdown.html">Dropdown</a></li>

diff --git a/badges.html b/badges.html
@@ -86,6 +86,7 @@
             <li class="bold"><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
               <div class="collapsible-body">
                 <ul>
+                  <li><a href="carousel.html">Carousel</a></li>
                   <li><a href="collapsible.html">Collapsible</a></li>
                   <li><a href="dialogs.html">Dialogs</a></li>
                   <li><a href="dropdown.html">Dropdown</a></li>

diff --git a/bin/materialize.css b/bin/materialize.css
@@ -7505,31 +7505,80 @@ input[type=range]:focus::-ms-fill-upper {
           transform-origin: 0% 50%;
 }
 
-.carousel .carousel-item {
-  width: 200px;
-  position: absolute;
+.carousel.carousel-slider {
   top: 0;
   left: 0;
+  height: 0;
 }
 
-.carousel .carousel-item img {
-  width: 100%;
+.carousel.carousel-slider .carousel-fixed-item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 20px;
+  z-index: 1;
 }
 
-.carousel.carousel-slider {
-  top: 0;
-  left: 0;
-  height: 0;
+.carousel.carousel-slider .carousel-fixed-item.with-indicators {
+  bottom: 68px;
 }
 
 .carousel.carousel-slider .carousel-item {
   width: 100%;
   height: 100%;
+  min-height: 400px;
   position: absolute;
   top: 0;
   left: 0;
 }
 
+.carousel.carousel-slider .carousel-item h2 {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+.carousel.carousel-slider .carousel-item p {
+  font-size: 15px;
+}
+
+.carousel .carousel-item {
+  width: 200px;
+  height: 400px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.carousel .carousel-item img {
+  width: 100%;
+}
+
+.carousel .indicators {
+  position: absolute;
+  text-align: center;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+
+.carousel .indicators .indicator-item {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  height: 8px;
+  width: 8px;
+  margin: 24px 4px;
+  background-color: rgba(255, 255, 255, 0.5);
+  transition: background-color .3s;
+  border-radius: 50%;
+}
+
+.carousel .indicators .indicator-item.active {
+  background-color: #fff;
+}
+
 /* ==========================================================================
    $BASE-PICKER
    ========================================================================== */

diff --git a/bin/materialize.js b/bin/materialize.js
diff --git a/breadcrumbs.html b/breadcrumbs.html
@@ -86,6 +86,7 @@
             <li class="bold"><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
               <div class="collapsible-body">
                 <ul>
+                  <li><a href="carousel.html">Carousel</a></li>
                   <li><a href="collapsible.html">Collapsible</a></li>
                   <li><a href="dialogs.html">Dialogs</a></li>
                   <li><a href="dropdown.html">Dropdown</a></li>

diff --git a/buttons.html b/buttons.html
@@ -86,6 +86,7 @@
             <li class="bold"><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
               <div class="collapsible-body">
                 <ul>
+                  <li><a href="carousel.html">Carousel</a></li>
                   <li><a href="collapsible.html">Collapsible</a></li>
                   <li><a href="dialogs.html">Dialogs</a></li>
                   <li><a href="dropdown.html">Dropdown</a></li>

diff --git a/cards.html b/cards.html
@@ -86,6 +86,7 @@
             <li class="bold"><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
               <div class="collapsible-body">
                 <ul>
+                  <li><a href="carousel.html">Carousel</a></li>
                   <li><a href="collapsible.html">Collapsible</a></li>
                   <li><a href="dialogs.html">Dialogs</a></li>
                   <li><a href="dropdown.html">Dropdown</a></li>