adds sexy rotating arrows to accordions, renames carets to triangles in icon font

RELEASE NOTES.md

@@ -1,6 +1,11 @@
 RELEASE NOTES
 --------------
 
+Version 0.11 Sep 26, 2013
+
+New
+-Adds dropdown icon sexiness to accordions, now with rotating pointing arrows
+
 Version 0.1 - Sep 25, 2013
 
 New

build/less/elements/icon.less

@@ -128,10 +128,10 @@ i.icon.calendar.empty:before { content: "\f133"; }
 i.icon.calendar:before { content: "\f073"; }
 i.icon.camera.retro:before { content: "\f083"; }
 i.icon.camera:before { content: "\f030"; }
-i.icon.caret.down:before { content: "\f0d7"; }
-i.icon.caret.left:before { content: "\f0d9"; }
-i.icon.caret.right:before { content: "\f0da"; }
-i.icon.caret.up:before { content: "\f0d8"; }
+i.icon.triangle.down:before { content: "\f0d7"; }
+i.icon.triangle.left:before { content: "\f0d9"; }
+i.icon.triangle.right:before { content: "\f0da"; }
+i.icon.triangle.up:before { content: "\f0d8"; }
 i.icon.cart:before { content: "\f07a"; }
 i.icon.certificate:before { content: "\f0a3"; }
 i.icon.chat.outline:before { content: "\f0e6"; }
@@ -443,6 +443,8 @@ i.icon.close:before { content: "\f00d"; }
 i.icon.delete:before { content: "\f00d"; }
 i.icon.like:before { content: "\f004"; }
 i.icon.signup:before { content: "\f044"; }
+i.icon.dropdown:before { content: "\f0da"; }
+i.icon.open.dropdown:before { content: "\f0d7"; }
 
 
 /*--------------

build/less/modules/accordion.less

@@ -66,6 +66,38 @@
   padding: 1.3em 1em;
 }
 
+/* Arrow */
+.ui.accordion .title .dropdown.icon {
+  display: inline-block;
+  float: none;
+  margin: 0em 0.5em 0em 0em;
+
+  -webkit-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -moz-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -o-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -ms-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 
 /*--------------
  Loose Coupling
@@ -93,19 +125,26 @@
 ---------------*/
 
 .ui.accordion .title:hover,
-.ui.accordion .title.active {
+.ui.accordion .active.title {
 	color: rgba(0, 0, 0, 0.8);
 }
 
-
 /*--------------
-      Active
+     Active
 ---------------*/
-.ui.accordion .title.active {
+
+.ui.accordion .active.title {
 	background-color: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.8);
 }
-.ui.accordion .content.active {
+.ui.accordion .active.title .dropdown.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui.accordion .active.content {
   display: block;
 }
 

build/minified/modules/accordion.min.css

@@ -1 +1 @@
-.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.basic.accordion.menu{background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.basic.accordion.menu .title,.ui.basic.accordion.menu .content{padding:0}.ui.accordion .title:hover,.ui.accordion .title.active{color:rgba(0,0,0,.8)}.ui.accordion .title.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .content.active{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0}
+.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.accordion .title .dropdown.icon{display:inline-block;float:none;margin:0 .5em 0 0;-webkit-transition:transform .2s ease,opacity .2s ease;-moz-transition:transform .2s ease,opacity .2s ease;-o-transition:transform .2s ease,opacity .2s ease;-ms-transition:transform .2s ease,opacity .2s ease;transition:transform .2s ease,opacity .2s ease;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ui.basic.accordion.menu{background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.basic.accordion.menu .title,.ui.basic.accordion.menu .content{padding:0}.ui.accordion .title:hover,.ui.accordion .active.title{color:rgba(0,0,0,.8)}.ui.accordion .active.title{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .active.title .dropdown.icon{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.ui.accordion .active.content{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0}

build/uncompressed/elements/icon.css

@@ -226,16 +226,16 @@ i.icon.camera.retro:before {
 i.icon.camera:before {
   content: "\f030";
 }
-i.icon.caret.down:before {
+i.icon.triangle.down:before {
   content: "\f0d7";
 }
-i.icon.caret.left:before {
+i.icon.triangle.left:before {
   content: "\f0d9";
 }
-i.icon.caret.right:before {
+i.icon.triangle.right:before {
   content: "\f0da";
 }
-i.icon.caret.up:before {
+i.icon.triangle.up:before {
   content: "\f0d8";
 }
 i.icon.cart:before {
@@ -1154,6 +1154,12 @@ i.icon.like:before {
 i.icon.signup:before {
   content: "\f044";
 }
+i.icon.dropdown:before {
+  content: "\f0da";
+}
+i.icon.open.dropdown:before {
+  content: "\f0d7";
+}
 /*--------------
    Spacing Fix
 ---------------*/

build/uncompressed/modules/accordion.css

@@ -43,6 +43,32 @@
   margin: 0em;
   padding: 1.3em 1em;
 }
+/* Arrow */
+.ui.accordion .title .dropdown.icon {
+  display: inline-block;
+  float: none;
+  margin: 0em 0.5em 0em 0em;
+  -webkit-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -moz-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -o-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -ms-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 /*--------------
  Loose Coupling
 ---------------*/
@@ -63,17 +89,24 @@
       Hover
 ---------------*/
 .ui.accordion .title:hover,
-.ui.accordion .title.active {
+.ui.accordion .active.title {
   color: rgba(0, 0, 0, 0.8);
 }
 /*--------------
-      Active
+     Active
 ---------------*/
-.ui.accordion .title.active {
+.ui.accordion .active.title {
   background-color: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.8);
 }
-.ui.accordion .content.active {
+.ui.accordion .active.title .dropdown.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui.accordion .active.content {
   display: block;
 }
 /*******************************

node/src/documents/elements/icon.html.eco

@@ -636,10 +636,10 @@ type        : 'UI Element'
         <div class="column"><i class="right icon"></i>Right</div>
         <div class="column"><i class="up icon"></i>Up</div>
         <div class="column"><i class="asterisk icon"></i>Asterisk</div>
-        <div class="column"><i class="caret down icon"></i>Caret Down</div>
-        <div class="column"><i class="caret left icon"></i>Caret Left</div>
-        <div class="column"><i class="caret right icon"></i>Caret Right</div>
-        <div class="column"><i class="caret up icon"></i>Caret Up</div>
+        <div class="column"><i class="triangle down icon"></i>Triangle Down</div>
+        <div class="column"><i class="triangle left icon"></i>Triangle Left</div>
+        <div class="column"><i class="triangle right icon"></i>Triangle Right</div>
+        <div class="column"><i class="triangle up icon"></i>Triangle Up</div>
         <div class="column"><i class="arrow down icon"></i>Down Arrow</div>
         <div class="column"><i class="arrow left icon"></i>Left Arrow</div>
         <div class="column"><i class="arrow right icon"></i>Right Arrow</div>
@@ -684,10 +684,10 @@ type        : 'UI Element'
     <i class="arrow right icon"></i>
     <i class="arrow up icon"></i>
     <i class="asterisk icon"></i>
-    <i class="caret down icon"></i>
-    <i class="caret left icon"></i>
-    <i class="caret right icon"></i>
-    <i class="caret up icon"></i>
+    <i class="triangle down icon"></i>
+    <i class="triangle left icon"></i>
+    <i class="triangle right icon"></i>
+    <i class="triangle up icon"></i>
     <i class="arrow down icon"></i>
     <i class="arrow left icon"></i>
     <i class="arrow right icon"></i>

node/src/documents/modules/accordion.html.eco

@@ -29,22 +29,31 @@ type        : 'UI Module'
     <h4 class="ui header">Accordion</h4>
     <p>A standard accordion</p>
     <div class="ui accordion">
-      <div class="active title">What is a dog?</div>
+      <div class="active title">
+        <i class="dropdown icon"></i>
+        What is a dog?
+      </div>
       <div class="active content">
         <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
       </div>
-      <div class="title">What kinds of dogs are there?</div>
+      <div class="title">
+        <i class="dropdown icon"></i>
+        What kinds of dogs are there?
+      </div>
       <div class="content">
         <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
       </div>
-      <div class="title">How do you acquire a dog?</div>
+      <div class="title">
+        <i class="dropdown icon"></i>
+        How do you acquire a dog?
+      </div>
       <div class="content">
         <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
         <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
       </div>
     </div>
-
   </div>
+
   <h2 class="ui dividing header">Examples</h2>
 
   <div class="example">
@@ -62,8 +71,8 @@ type        : 'UI Module'
         </div>
       </div>
       <div class="title">
-        Optional Details
         <i class="icon dropdown"></i>
+        Optional Details
       </div>
       <div class="content">
         <div class="field">
@@ -78,9 +87,9 @@ type        : 'UI Module'
     <p>An accordion can be used to create content drawers inside a menu</p>
     <div class="ui basic vertical accordion menu">
       <div class="item">
-        <a class="title">
-          Size
+        <a class="active title">
           <i class="dropdown icon"></i>
+          Size
         </a>
         <div class="active content menu">
           <div class="ui form item">
@@ -118,9 +127,9 @@ type        : 'UI Module'
         </div>
       </div>
       <div class="item">
-        <a class="title">
-          Colors
+        <a class="active title">
           <i class="dropdown icon"></i>
+          Colors
         </a>
         <div class="active content menu">
           <div class="ui form item">
@@ -166,22 +175,22 @@ type        : 'UI Module'
     <p>A basic accordion does not add any extra formatting</p>
     <div class="ui basic accordion">
       <div class="active title">
-        What is a dog?
         <i class="dropdown icon"></i>
+        What is a dog?
       </div>
       <div class="active content">
         <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
       </div>
       <div class="title">
-        What kinds of dogs are there?
         <i class="dropdown icon"></i>
+        What kinds of dogs are there?
       </div>
       <div class="content">
         <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
       </div>
       <div class="title">
-        How do you acquire a dog?
         <i class="dropdown icon"></i>
+        How do you acquire a dog?
       </div>
       <div class="content">
         <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>

node/src/files/build/less/elements/icon.less

@@ -128,10 +128,10 @@ i.icon.calendar.empty:before { content: "\f133"; }
 i.icon.calendar:before { content: "\f073"; }
 i.icon.camera.retro:before { content: "\f083"; }
 i.icon.camera:before { content: "\f030"; }
-i.icon.caret.down:before { content: "\f0d7"; }
-i.icon.caret.left:before { content: "\f0d9"; }
-i.icon.caret.right:before { content: "\f0da"; }
-i.icon.caret.up:before { content: "\f0d8"; }
+i.icon.triangle.down:before { content: "\f0d7"; }
+i.icon.triangle.left:before { content: "\f0d9"; }
+i.icon.triangle.right:before { content: "\f0da"; }
+i.icon.triangle.up:before { content: "\f0d8"; }
 i.icon.cart:before { content: "\f07a"; }
 i.icon.certificate:before { content: "\f0a3"; }
 i.icon.chat.outline:before { content: "\f0e6"; }
@@ -443,6 +443,8 @@ i.icon.close:before { content: "\f00d"; }
 i.icon.delete:before { content: "\f00d"; }
 i.icon.like:before { content: "\f004"; }
 i.icon.signup:before { content: "\f044"; }
+i.icon.dropdown:before { content: "\f0da"; }
+i.icon.open.dropdown:before { content: "\f0d7"; }
 
 
 /*--------------

node/src/files/build/less/modules/accordion.less

@@ -66,6 +66,38 @@
   padding: 1.3em 1em;
 }
 
+/* Arrow */
+.ui.accordion .title .dropdown.icon {
+  display: inline-block;
+  float: none;
+  margin: 0em 0.5em 0em 0em;
+
+  -webkit-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -moz-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -o-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -ms-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 
 /*--------------
  Loose Coupling
@@ -93,19 +125,26 @@
 ---------------*/
 
 .ui.accordion .title:hover,
-.ui.accordion .title.active {
+.ui.accordion .active.title {
 	color: rgba(0, 0, 0, 0.8);
 }
 
-
 /*--------------
-      Active
+     Active
 ---------------*/
-.ui.accordion .title.active {
+
+.ui.accordion .active.title {
 	background-color: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.8);
 }
-.ui.accordion .content.active {
+.ui.accordion .active.title .dropdown.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui.accordion .active.content {
   display: block;
 }
 

node/src/files/build/minified/modules/accordion.min.css

@@ -1 +1 @@
-.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.basic.accordion.menu{background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.basic.accordion.menu .title,.ui.basic.accordion.menu .content{padding:0}.ui.accordion .title:hover,.ui.accordion .title.active{color:rgba(0,0,0,.8)}.ui.accordion .title.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .content.active{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0}
+.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.accordion .title .dropdown.icon{display:inline-block;float:none;margin:0 .5em 0 0;-webkit-transition:transform .2s ease,opacity .2s ease;-moz-transition:transform .2s ease,opacity .2s ease;-o-transition:transform .2s ease,opacity .2s ease;-ms-transition:transform .2s ease,opacity .2s ease;transition:transform .2s ease,opacity .2s ease;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ui.basic.accordion.menu{background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.basic.accordion.menu .title,.ui.basic.accordion.menu .content{padding:0}.ui.accordion .title:hover,.ui.accordion .active.title{color:rgba(0,0,0,.8)}.ui.accordion .active.title{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .active.title .dropdown.icon{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.ui.accordion .active.content{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0}

node/src/files/build/uncompressed/elements/icon.css

@@ -226,16 +226,16 @@ i.icon.camera.retro:before {
 i.icon.camera:before {
   content: "\f030";
 }
-i.icon.caret.down:before {
+i.icon.triangle.down:before {
   content: "\f0d7";
 }
-i.icon.caret.left:before {
+i.icon.triangle.left:before {
   content: "\f0d9";
 }
-i.icon.caret.right:before {
+i.icon.triangle.right:before {
   content: "\f0da";
 }
-i.icon.caret.up:before {
+i.icon.triangle.up:before {
   content: "\f0d8";
 }
 i.icon.cart:before {
@@ -1154,6 +1154,12 @@ i.icon.like:before {
 i.icon.signup:before {
   content: "\f044";
 }
+i.icon.dropdown:before {
+  content: "\f0da";
+}
+i.icon.open.dropdown:before {
+  content: "\f0d7";
+}
 /*--------------
    Spacing Fix
 ---------------*/

node/src/files/build/uncompressed/modules/accordion.css

@@ -43,6 +43,32 @@
   margin: 0em;
   padding: 1.3em 1em;
 }
+/* Arrow */
+.ui.accordion .title .dropdown.icon {
+  display: inline-block;
+  float: none;
+  margin: 0em 0.5em 0em 0em;
+  -webkit-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -moz-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -o-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -ms-transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  transition: transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 /*--------------
  Loose Coupling
 ---------------*/
@@ -63,17 +89,24 @@
       Hover
 ---------------*/
 .ui.accordion .title:hover,
-.ui.accordion .title.active {
+.ui.accordion .active.title {
   color: rgba(0, 0, 0, 0.8);
 }
 /*--------------
-      Active
+     Active
 ---------------*/
-.ui.accordion .title.active {
+.ui.accordion .active.title {
   background-color: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.8);
 }
-.ui.accordion .content.active {
+.ui.accordion .active.title .dropdown.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui.accordion .active.content {
   display: block;
 }
 /*******************************

node/src/layouts/default.html.eco

@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <head>
-<% uiIntroduction    = @getCollection("documents").findAllLive({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>
-<% uiProject         = @getCollection("documents").findAllLive({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>
-<% uiGuide           = @getCollection("documents").findAllLive({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>
-<% uiElements        = @getCollection("documents").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
-<% uiCollections     = @getCollection("documents").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
-<% uiViews           = @getCollection("documents").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
-<% uiModules         = @getCollection("documents").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
-<% uiBehavior        = @getCollection("documents").findAllLive({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>
-<% uiSpecification   = @getCollection("documents").findAllLive({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>
-<% currentCollection = @getCollection("documents").findAllLive({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
+<% uiIntroduction    = @getCollection("documents").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>
+<% uiProject         = @getCollection("documents").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>
+<% uiGuide           = @getCollection("documents").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>
+<% uiElements        = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
+<% uiCollections     = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
+<% uiViews           = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
+<% uiModules         = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
+<% uiBehavior        = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>
+<% uiSpecification   = @getCollection("documents").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>
+<% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
 <% pageCount         = @pageCount(currentCollection) %>
 <% pageNumber        = @getPage(currentCollection, @document.id) %>
 <% pageCollection    = @getPageCollection(currentCollection, @document.id) %>

src/elements/icon.less

@@ -128,10 +128,10 @@ i.icon.calendar.empty:before { content: "\f133"; }
 i.icon.calendar:before { content: "\f073"; }
 i.icon.camera.retro:before { content: "\f083"; }
 i.icon.camera:before { content: "\f030"; }
-i.icon.caret.down:before { content: "\f0d7"; }
-i.icon.caret.left:before { content: "\f0d9"; }
-i.icon.caret.right:before { content: "\f0da"; }
-i.icon.caret.up:before { content: "\f0d8"; }
+i.icon.triangle.down:before { content: "\f0d7"; }
+i.icon.triangle.left:before { content: "\f0d9"; }
+i.icon.triangle.right:before { content: "\f0da"; }
+i.icon.triangle.up:before { content: "\f0d8"; }
 i.icon.cart:before { content: "\f07a"; }
 i.icon.certificate:before { content: "\f0a3"; }
 i.icon.chat.outline:before { content: "\f0e6"; }
@@ -443,6 +443,8 @@ i.icon.close:before { content: "\f00d"; }
 i.icon.delete:before { content: "\f00d"; }
 i.icon.like:before { content: "\f004"; }
 i.icon.signup:before { content: "\f044"; }
+i.icon.dropdown:before { content: "\f0da"; }
+i.icon.open.dropdown:before { content: "\f0d7"; }
 
 
 /*--------------

src/modules/accordion.less

@@ -66,6 +66,38 @@
   padding: 1.3em 1em;
 }
 
+/* Arrow */
+.ui.accordion .title .dropdown.icon {
+  display: inline-block;
+  float: none;
+  margin: 0em 0.5em 0em 0em;
+
+  -webkit-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -moz-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -o-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -ms-transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease
+  ;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
 
 /*--------------
  Loose Coupling
@@ -93,19 +125,26 @@
 ---------------*/
 
 .ui.accordion .title:hover,
-.ui.accordion .title.active {
+.ui.accordion .active.title {
 	color: rgba(0, 0, 0, 0.8);
 }
 
-
 /*--------------
-      Active
+     Active
 ---------------*/
-.ui.accordion .title.active {
+
+.ui.accordion .active.title {
 	background-color: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.8);
 }
-.ui.accordion .content.active {
+.ui.accordion .active.title .dropdown.icon {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui.accordion .active.content {
   display: block;
 }