Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Killing m-card-light

  • Loading branch information...
commit 96280c99780af0cbbd069dce6309f05128579a93 1 parent ed075aa
@mobifydave mobifydave authored
View
39 www/modules/carousel-examples.html
@@ -12,7 +12,7 @@
padding-bottom: 30px;
}
-.m-card-light {
+.m-slide {
width: 200px;
margin: 30px 10px 0 10px;
}
@@ -20,7 +20,7 @@
margin-top: 0;
}
- .m-item .m-card img, .m-item .m-card-light img {
+ .m-item .m-card img, .m-item .m-slide img {
width: 100%;
max-width: 100%;
height: auto;
@@ -28,6 +28,7 @@
</style>
+
<h1>Carousel Examples</h1>
<p>Examples of the rotating image carousel module in action. Sample code provided!</p>
@@ -282,38 +283,38 @@
<h2>Fixed Width Items</h2>
<p>Items can be stretched to fit the viewport, or they can be sized individually like in this example.
-In this example, we've used the included <code>.m-card-light</code> class to give the element a background and border.
+In this example, we've used the included <code>.m-slide</code> class to give the element a background and border.
You will have to to size the element or it's content yourself.
</p>
<div class="m-carousel m-center m-fade-out" id="m-carousel-example-6">
<div class="m-carousel-inner">
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
<p class="m-caption">Blossoms</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
<p class="m-caption">Glacier</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
<p class="m-caption">Helmets</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
<p class="m-caption">Parliament</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
<p class="m-caption">Pods</p>
</div>
@@ -329,19 +330,19 @@
<pre><code>&lt;div class=&quot;m-carousel m-center m-fade-out&quot;&gt;
&lt;div class=&quot;m-carousel-inner&quot;&gt;
&lt;div class=&quot;m-item&quot;&gt;
- &lt;div class=&quot;m-card-light&quot;&gt;
+ &lt;div class=&quot;m-slide&quot;&gt;
&lt;img src=&quot;image1.jpg&quot;&gt;
&lt;p class=&quot;m-caption&quot;&gt;Caption #1&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;m-item&quot;&gt;
- &lt;div class=&quot;m-card-light&quot;&gt;
+ &lt;div class=&quot;m-slide&quot;&gt;
&lt;img src=&quot;image2.jpg&quot;&gt;
&lt;p class=&quot;m-caption&quot;&gt;Caption #2&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;m-item&quot;&gt;
- &lt;div class=&quot;m-card-light&quot;&gt;
+ &lt;div class=&quot;m-slide&quot;&gt;
&lt;img src=&quot;image3.jpg&quot;&gt;
&lt;p class=&quot;m-caption&quot;&gt;Caption #3&lt;/p&gt;
&lt;/div&gt;
@@ -354,31 +355,31 @@
<div class="m-carousel m-center m-scaled m-fade-out" id="m-carousel-example-7">
<div class="m-carousel-inner">
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
<p class="m-caption">Blossoms</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
<p class="m-caption">Fox Glacier</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
<p class="m-caption">Helmets</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
<p class="m-caption">Parliament</p>
</div>
</div>
<div class="m-item">
- <div class="m-card-light m-slide">
+ <div class="m-slide">
<img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
<p class="m-caption">Pods</p>
</div>
@@ -394,19 +395,19 @@
<pre><code>&lt;div class=&quot;m-carousel m-center m-scaled m-fade-out&quot;&gt;
&lt;div class=&quot;m-carousel-inner&quot;&gt;
&lt;div class=&quot;m-item&quot;&gt;
- &lt;div class=&quot;m-card-light&quot;&gt;
+ &lt;div class=&quot;m-slide&quot;&gt;
&lt;img src=&quot;image1.jpg&quot;&gt;
&lt;p class=&quot;m-caption&quot;&gt;Caption #1&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;m-item&quot;&gt;
- &lt;div class=&quot;m-card-light&quot;&gt;
+ &lt;div class=&quot;m-slide&quot;&gt;
&lt;img src=&quot;image2.jpg&quot;&gt;
&lt;p class=&quot;m-caption&quot;&gt;Caption #2&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;m-item&quot;&gt;
- &lt;div class=&quot;m-card-light&quot;&gt;
+ &lt;div class=&quot;m-slide&quot;&gt;
&lt;img src=&quot;image3.jpg&quot;&gt;
&lt;p class=&quot;m-caption&quot;&gt;Caption #3&lt;/p&gt;
&lt;/div&gt;
View
4 www/static/examples/css/carousel-style.css
@@ -247,11 +247,9 @@
background: rgba(0,0,0,0.5);
color: #FFF;
}
-.m-card-light {
+.m-slide {
background: rgba(255,255,255,0.9);
color: #000;
-}
-.m-slide {
padding: 20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
Please sign in to comment.
Something went wrong with that request. Please try again.