Adds accordion icon positioning into variables

server/files/javascript/semantic.js

@@ -116,12 +116,12 @@ semantic.ready = function() {
               ? $exampleSet.index($lastExample)
               : $exampleSet.size(),
             $examples     = $exampleSet.slice(firstIndex, lastIndex + 1),
-            activeClass   = (index == 0)
+            activeClass   = (index === 0)
               ? 'active '
               : 'active '
           ;
           html += '<div class="item">';
-          html += ' <i class="dropdown icon"></i><a class="'+activeClass+'title"><b>' + $(this).text() + '</b></a>';
+          html += '<a class="'+activeClass+'title"><i class="dropdown icon"></i> <b>' + $(this).text() + '</b></a>';
           html += '<div class="'+activeClass+'content menu">';
           $examples
             .each(function() {

src/definitions/modules/accordion.less

@@ -62,9 +62,17 @@
   margin: @iconMargin;
   transition: @iconTransition;
   vertical-align: @iconVerticalAlign;
+  transform: @iconTransform;
 }
 
+/*******************************
+            States
+*******************************/
 
+.ui.accordion .active.title .dropdown.icon,
+.ui.accordion .accordion .active.title .dropdown.icon {
+  transform: @activeIconTransform;
+}
 
 /*******************************
             Types

src/themes/packages/default/modules/accordion.overrides

@@ -25,14 +25,4 @@
 .ui.accordion .title .dropdown.icon:before,
 .ui.accordion .accordion .title .dropdown.icon:before {
   content: '\f0da'/*rtl:'\f0d9'*/;
-}
-
-/* Icon Rotation */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
-  transform: rotate(0deg);
-}
-.ui.accordion .active.title .dropdown.icon,
-.ui.accordion .accordion .active.title .dropdown.icon {
-  transform: rotate(90deg);
 }

src/themes/packages/default/modules/accordion.variables

@@ -24,6 +24,8 @@
 ;
 @iconVerticalAlign: baseline;
 
+@iconTransform: rotate(0deg);
+
 /* Child Accordion */
 @childAccordionMargin: 1em 0em 0em;
 @childAccordionPadding: 0em;
@@ -32,6 +34,12 @@
 @contentMargin: 0em;
 @contentPadding: 0.5em 0em 1em;
 
+/*-------------------
+       States
+--------------------*/
+
+@activeIconTransform: rotate(90deg);
+
 /*-------------------
       Variations
 --------------------*/