Skip to content
This repository has been archived by the owner on Jan 31, 2018. It is now read-only.

Commit

Permalink
Merge pull request #38 from himedlooff/gh-pages
Browse files Browse the repository at this point in the history 
Adds animated cues.
  • Loading branch information
@ascott1
ascott1 committed Oct 29, 2014
2 parents a178c36 + bdb1b8c commit a8214a9
Show file tree
Hide file tree
Showing 9 changed files with 393 additions and 5 deletions.
15 changes: 15 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@ All notable changes to this project will be documented in this file.
We follow the [Semantic Versioning 2.0.0](http://semver.org/) format.


## 0.6.1 - 2014-10-28

### Added
- Animated cues.

### Deprecated
- Nothing.

### Removed
- Nothing.

### Fixed
- Nothing.


## 0.6.0 - 2014-10-28

### Added
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cf-expandables",
"version": "0.6.0",
"version": "0.6.1",
"description": "Standard expandable (show/hide) component for Capital Framework.",
"keywords": ["capital-framework", "capital", "expandables", "jquery", "js", "less"],
"authors": [
Expand Down
44 changes: 44 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,50 @@
<span class="expandable_link">
Lorem ipsum
</span>
</div><br>
</div>
</div>
<div id="animated-cues">
<div>
<div>
<div class="expandable">
<button class="expandable_target">
<span class="expandable_cue-open expandable_cue-open__animated">
<span class="cf-icon cf-icon-down"></span>
</span>
<span class="expandable_cue-close expandable_cue-close__animated">
<span class="cf-icon cf-icon-up"></span>
</span>
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
<div class="expandable expandable__expanded">
<button class="expandable_target">
<span class="expandable_cue-open expandable_cue-open__animated">
<span class="cf-icon cf-icon-down"></span>
</span>
<span class="expandable_cue-close expandable_cue-close__animated">
<span class="cf-icon cf-icon-up"></span>
</span>
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
</div><br>
</div>
</div>
Expand Down
73 changes: 72 additions & 1 deletion demo/static/css/main.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion demo/static/js/component.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

117 changes: 117 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,123 @@ <h3 class="docs-pattern_header">.expandable_link (element)</h3>
.lt-ie9 .expandable_link strong,
.lt-ie9 .expandable_link b {
font-weight: normal !important;
}</code></pre>
</div>
</div>
<div id="animated-cues" class="docs-component">
<h2 class="docs-component_header"><span>Animated cues</span></h2>
<div class="docs-patterns">
<div class="docs-pattern">
<h3 class="docs-pattern_header">.expandable_cue-open/close__animated (modifier)</h3>
<section class="docs-pattern_pattern">
<div class="expandable">
<button class="expandable_target">
<span class="expandable_cue-open expandable_cue-open__animated">
<span class="cf-icon cf-icon-down"></span>
</span>
<span class="expandable_cue-close expandable_cue-close__animated">
<span class="cf-icon cf-icon-up"></span>
</span>
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
<div class="expandable expandable__expanded">
<button class="expandable_target">
<span class="expandable_cue-open expandable_cue-open__animated">
<span class="cf-icon cf-icon-down"></span>
</span>
<span class="expandable_cue-close expandable_cue-close__animated">
<span class="cf-icon cf-icon-up"></span>
</span>
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>

</section>
<footer class="docs-pattern_footer">
<pre class="docs-code docs-pattern_markup"><code data-language="html">&lt;div class=&quot;expandable&quot;&gt;
&lt;button class=&quot;expandable_target&quot;&gt;
&lt;span class=&quot;expandable_cue-open expandable_cue-open__animated&quot;&gt;
&lt;span class=&quot;cf-icon cf-icon-down&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;expandable_cue-close expandable_cue-close__animated&quot;&gt;
&lt;span class=&quot;cf-icon cf-icon-up&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;expandable_content&quot;&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;expandable expandable__expanded&quot;&gt;
&lt;button class=&quot;expandable_target&quot;&gt;
&lt;span class=&quot;expandable_cue-open expandable_cue-open__animated&quot;&gt;
&lt;span class=&quot;cf-icon cf-icon-down&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;expandable_cue-close expandable_cue-close__animated&quot;&gt;
&lt;span class=&quot;cf-icon cf-icon-up&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;expandable_content&quot;&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<ul class="docs-codenotes">
<li>
<pre class="docs-code"><code>.expandable_cue-open__animated
.expandable_cue-close__animated</code></pre>
</li>
</ul>
</footer>
</div>
</div>
<div class="docs-css">
<pre class="docs-code"><code data-language="css">.expandable_cue-open__animated,
.expandable_cue-close__animated {
-webkit-transition: 0.25s -webkit-transform;
transition: 0.25s transform;
}
.expandable_cue-close__animated {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.expandable__expanded .expandable_cue-close__animated {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.expandable__expanded .expandable_cue-open__animated {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}</code></pre>
</div>
</div>
Expand Down
73 changes: 72 additions & 1 deletion docs/static/css/main.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/static/js/component.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

70 changes: 70 additions & 0 deletions src/less/cf-expandables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,76 @@
}


/* topdoc
name: Animated cues
family: cf-expandables
patterns:
- name: .expandable_cue-open/close__animated (modifier)
codenotes:
- |
.expandable_cue-open__animated
.expandable_cue-close__animated
markup: |
<div class="expandable">
<button class="expandable_target">
<span class="expandable_cue-open expandable_cue-open__animated">
<span class="cf-icon cf-icon-down"></span>
</span>
<span class="expandable_cue-close expandable_cue-close__animated">
<span class="cf-icon cf-icon-up"></span>
</span>
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
<div class="expandable expandable__expanded">
<button class="expandable_target">
<span class="expandable_cue-open expandable_cue-open__animated">
<span class="cf-icon cf-icon-down"></span>
</span>
<span class="expandable_cue-close expandable_cue-close__animated">
<span class="cf-icon cf-icon-up"></span>
</span>
</button>
<div class="expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
tags:
- cf-expandables
*/

.expandable_cue-open__animated,
.expandable_cue-close__animated {
transition: 0.25s transform;
}

.expandable_cue-close__animated {
transform: rotate(180deg);
}

.expandable__expanded .expandable_cue-close__animated {
transform: rotate(0);
}

.expandable__expanded .expandable_cue-open__animated {
transform: rotate(-180deg);
}


/* topdoc
name: Expandable header elements
family: cf-expandables
Expand Down

0 comments on commit a8214a9

Please sign in to comment.