Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Accordion update #51

Merged
merged 4 commits into from

4 participants

@mezzoblue

Adjusting Accordion examples a bit to fix some errors, streamline them, and added a new arrow example at the bottom

@rrjamie

Do we expect any confusion because the colours are inline styes? Eg, if I copy and paste the markup for an the redish example, will I be disappointed with my sad grey accordion?

Possible solution: remove the colours.

@mezzoblue

I see it as more of a demonstration of how you extend the base style. Here's a module, it looks like this. Want to make it look different? We did in this example, you can study our code to see how it was done.

@jansepar
Owner

+1 looks good with the z-index stuff hiding the arrow upon closing :D

@jansepar jansepar merged commit 7b4cee5 into master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
117 www/modules/accordion-examples.md
@@ -7,6 +7,13 @@ title: Mobify.js Accordion Examples
<link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-style.css">
<style type="text/css">
+.m-arrows .m-inner-content {
+ color: #fff;
+ background: #666;
+ padding-top: 20px;
+}
+
+
.m-indicators-css .m-header {
border-color: #f6dada;
background: #fdf7f7; /* Old browsers */
@@ -99,8 +106,10 @@ title: Mobify.js Accordion Examples
# Accordion Examples
-<h2>Basic Accordion</h2>
-<p>The basic accordion control with default styling.</p>
+## Basic Accordion
+
+The basic accordion control with default styling.
+
<ul class="m-accordion">
<li class="m-item">
<h3 class="m-header">
@@ -148,7 +157,7 @@ title: Mobify.js Accordion Examples
<div class="m-content">
<div class="m-inner-content">
<h2>Content 1</h2>
- <h2>Lorem Ipsum</h2>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
@@ -159,15 +168,17 @@ title: Mobify.js Accordion Examples
<div class="m-content">
<div class="m-inner-content">
<h2>Content 2</h2>
- <p>Lorem Ipsum</p>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
</ul>
-<h2>Image Indicators</h2>
-<p>The basic accordion control with images to reveal when a header is expanded or collapsed.</p>
+## Image Indicators
+
+The basic accordion control with images to reveal when a header is expanded or collapsed.
+
<ul class="m-accordion m-indicators-images">
<li class="m-item">
<h3 class="m-header">
@@ -210,8 +221,7 @@ title: Mobify.js Accordion Examples
</h3>
<div class="m-content">
<div class="m-inner-content">
- <h2>Content 1</h2>
- <h2>Lorem Ipsum</h2>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
@@ -221,8 +231,7 @@ title: Mobify.js Accordion Examples
</h3>
<div class="m-content">
<div class="m-inner-content">
- <h2>Content 2</h2>
- <p>Lorem Ipsum</p>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
@@ -230,8 +239,10 @@ title: Mobify.js Accordion Examples
-<h2>Textual Indicators</h2>
-<p>The basic accordion control with +/- CSS indicators that reveal when a header is expanded or collapsed.</p>
+## Textual Indicators
+
+The basic accordion control with +/- CSS indicators that reveal when a header is expanded or collapsed.
+
<ul class="m-accordion m-indicators-css">
<li class="m-item">
<h3 class="m-header">
@@ -274,8 +285,7 @@ title: Mobify.js Accordion Examples
</h3>
<div class="m-content">
<div class="m-inner-content">
- <h2>Content 1</h2>
- <h2>Lorem Ipsum</h2>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
@@ -285,16 +295,17 @@ title: Mobify.js Accordion Examples
</h3>
<div class="m-content">
<div class="m-inner-content">
- <h2>Content 2</h2>
- <p>Lorem Ipsum</p>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
</ul>
-<h2>CSS-only Indicators</h2>
-<p>The same style as the image indicators above, but built with CSS-only instead of images.</p>
+## CSS-only Indicators
+
+The same style as the image indicators above, but CSS-only instead of images.
+
<ul class="m-accordion m-indicators-css m-css-advanced">
<li class="m-item">
<h3 class="m-header">
@@ -328,7 +339,6 @@ title: Mobify.js Accordion Examples
</li>
</ul>
-
### Code for this example:
<ul class="m-accordion m-indicators-css m-css-advanced">
@@ -338,8 +348,7 @@ title: Mobify.js Accordion Examples
</h3>
<div class="m-content">
<div class="m-inner-content">
- <h2>Content 1</h2>
- <h2>Lorem Ipsum</h2>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
@@ -349,8 +358,7 @@ title: Mobify.js Accordion Examples
</h3>
<div class="m-content">
<div class="m-inner-content">
- <h2>Content 2</h2>
- <p>Lorem Ipsum</p>
+ <p>Lorem ipsum</p>
</div>
</div>
</li>
@@ -358,6 +366,69 @@ title: Mobify.js Accordion Examples
+## Arrow Indicators
+
+The basic accordion control with CSS arrows to indicate open headers.
+
+<ul class="m-accordion m-arrows">
+ <li class="m-item">
+ <h3 class="m-header">
+ <a>Food Trucks</a>
+ </h3>
+ <div class="m-content">
+ <div class="m-inner-content">
+ <p>Pickled keytar ethnic flexitarian, vegan ethical sartorial 8-bit yr williamsburg. Flexitarian typewriter viral, wolf banh mi gastropub letterpress street art mcsweeney's raw denim kogi semiotics blog.</p>
+ </div>
+ </div>
+ </li>
+ <li class="m-item">
+ <h3 class="m-header">
+ <a>PBR</a>
+ </h3>
+ <div class="m-content">
+ <div class="m-inner-content">
+ <p>Williamsburg quinoa sartorial, tattooed VHS food truck polaroid authentic gentrify Austin readymade vinyl dreamcatcher freegan seitan.</p>
+ </div>
+ </div>
+ </li>
+ <li class="m-item">
+ <h3 class="m-header">
+ <a>Fixies</a>
+ </h3>
+ <div class="m-content">
+ <div class="m-inner-content">
+ <p>Fanny pack seitan PBR synth, kale chips master cleanse helvetica high life artisan you probably haven't heard of them. Craft beer salvia high life, art party small batch retro pickled butcher scenester kale chips brooklyn 8-bit vinyl.</p>
+ <p>Trust fund mustache typewriter, portland artisan irony seitan master cleanse biodiesel ethnic banh mi bushwick squid semiotics truffaut. Marfa vinyl mumblecore, selvage beard kale chips gentrify four loko gluten-free messenger bag cliche vice forage.</p>
+ </div>
+ </div>
+ </li>
+</ul>
+
+### Code for this example:
+
+ <ul class="m-accordion m-arrows">
+ <li class="m-item">
+ <h3 class="m-header">
+ <a>Tab1</a>
+ </h3>
+ <div class="m-content">
+ <div class="m-inner-content">
+ <p>Lorem ipsum</p>
+ </div>
+ </div>
+ </li>
+ <li class="m-item">
+ <h3 class="m-header">
+ <a>Tab2</a>
+ </h3>
+ <div class="m-content">
+ <div class="m-inner-content">
+ <p>Lorem ipsum</p>
+ </div>
+ </div>
+ </li>
+ </ul>
+
<script src="{{ site.baseurl }}/static/examples/js/accordion.js"></script>
<script>
View
20 www/modules/carousel-examples.html
@@ -289,31 +289,31 @@
<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">
+ <div class="m-card-light 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">
+ <div class="m-card-light 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">
+ <div class="m-card-light 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">
+ <div class="m-card-light 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">
+ <div class="m-card-light m-slide">
<img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
<p class="m-caption">Pods</p>
</div>
@@ -354,31 +354,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">
+ <div class="m-card-light 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">
+ <div class="m-card-light 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">
+ <div class="m-card-light 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">
+ <div class="m-card-light 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">
+ <div class="m-card-light m-slide">
<img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
<p class="m-caption">Pods</p>
</div>
View
25 www/static/examples/css/accordion-style.css
@@ -10,6 +10,7 @@
border-width: 1px 0;
position: relative;
cursor: pointer;
+ z-index: 5;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
@@ -72,7 +73,7 @@
top: 50%;
right: 10px;
margin-top: -11px;
- z-index: 9;
+ z-index: 4;
width: 22px;
height: 22px;
background: url(../img/accordion.png) 0 -20px no-repeat;
@@ -92,6 +93,26 @@
}
+
+/* Accordion with CSS arrow indicators */
+.m-arrows .m-active .m-header:after {
+ top: 100%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-top-color: #f6f6f6;
+ border-width: 20px;
+ left: 50%;
+ margin-left: -20px;
+ z-index: 9;
+}
+ .m-arrows .m-active .m-header:hover:after {
+ border-top-color: #e6e6e6;
+ }
+
/* Accordion with CSS indicators */
.m-indicators-css .m-header:after {
content : "+";
@@ -113,7 +134,7 @@
-/* Accordion with CSS indicators */
+/* Accordion with advanced CSS indicators */
.m-css-advanced .m-header:after {
color: rgba(255,255,255,0.9);
font-weight: normal;
View
11 www/static/examples/css/carousel-style.css
@@ -247,11 +247,20 @@
background: rgba(0,0,0,0.5);
color: #FFF;
}
-
.m-card-light {
background: rgba(255,255,255,0.9);
color: #000;
}
+.m-slide {
+ padding: 20px;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+}
+.m-slide .m-caption {
+ margin: 0;
+ padding: 10px 0 0 0;
+}
.m-fade-out {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,
Something went wrong with that request. Please try again.